blocks|key|4060678|text|首先，您不必为每个按钮数创建一个函数，因为您可以使用选择器。看一个简单的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4060679|​|4060680|var+element+=+"";
$("button").click(function()+{
++element+%2B=+$(this).html();+//Get+the+button+number
++$("#result").html(element);
})|code-block|syntax|javascript|4060681|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>0</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>7</button>
<button>8</button>
<button>9</button>


<div>
++<strong>You+have+entered:</strong>+<span+id="result"></span>
</div>|4060682|4060683|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>First, you don't have to create a function for each button number because you can use selector for that. Look a simple solution for that:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var element = "";
$("button").click(function() {
  element += $(this).html(); //Get the button number
  $("#result").html(element);
})</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;button&gt;0&lt;/button&gt;
&lt;button&gt;1&lt;/button&gt;
&lt;button&gt;2&lt;/button&gt;
&lt;button&gt;3&lt;/button&gt;
&lt;button&gt;4&lt;/button&gt;
&lt;button&gt;5&lt;/button&gt;
&lt;button&gt;6&lt;/button&gt;
&lt;button&gt;7&lt;/button&gt;
&lt;button&gt;8&lt;/button&gt;
&lt;button&gt;9&lt;/button&gt;


&lt;div&gt;
  &lt;strong&gt;You have entered:&lt;/strong&gt; &lt;span id="result"&gt;&lt;/span&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4060737|text|您的代码行为出乎意料，因为您为每个按钮文本显示使用了ids，因此已经在它们中预定义了从0到10的顺序。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4060738|您可以将数字附加到html本身，如下所示|4060739|function+nmbr(num){
var+displaySpan+=+document.getElementById('numbers');
//appending+one+after+another
displaySpan.innerHTML+%2B=+num+%2B+'+';
}|code-block|syntax|javascript|4060740|You+have+entered<br>
<span+id="numbers"></span>
<br>
+<button+type="button"+onClick="nmbr('0')">+0+</button>
+<button+type="button"+onClick="nmbr('1')">+1+</button>
+<button+type="button"+onClick="nmbr('2')">+2+</button>
+<button+type="button"+onClick="nmbr('3')">+3+</button>
+<button+type="button"+onClick="nmbr('4')">+4+</button>|4060741|​|4060742|entityMap^0|Q|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>Your code was behaving unexpectedly becase you were using <code>ids</code> for each button text display, so the order was already predefined in them from 0-10.</p>

<p>You can append the numbers to the html itself like below
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function nmbr(num){
var displaySpan = document.getElementById('numbers');
//appending one after another
displaySpan.innerHTML += num + ' ';
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>You have entered&lt;br&gt;
&lt;span id="numbers"&gt;&lt;/span&gt;
&lt;br&gt;
 &lt;button type="button" onClick="nmbr('0')"&gt; 0 &lt;/button&gt;
 &lt;button type="button" onClick="nmbr('1')"&gt; 1 &lt;/button&gt;
 &lt;button type="button" onClick="nmbr('2')"&gt; 2 &lt;/button&gt;
 &lt;button type="button" onClick="nmbr('3')"&gt; 3 &lt;/button&gt;
 &lt;button type="button" onClick="nmbr('4')"&gt; 4 &lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4060779|text|问题是跨度已经按升序定义了，所以即使你在1之前打印2，它仍然会在'result2‘跨度内。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4060780|<span+id="result0"></span>
<span+id="result1"></span>
<span+id="result2"></span>|code-block|syntax|javascript|4060781|换成这个怎么样？|4060782|<button+type="button"+onClick="print(this)">+0+</button>
<button+type="button"+onClick="print(this)">+1+</button>
<button+type="button"+onClick="print(this)">+2+</button>

You+have+entered
<span+id="displaySpan"></span>

<script>
++++var+displaySpan+=+document.getElementById('displaySpan')
++++function+print(button){
++++++++displaySpan.innerHTML+%2B=+button.innerHTML
++++}
</script>|4060783|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>The problem is that the spans are already defined in ascending order, so even if you print 2 before 1, it'll still go inside the 'result2' span.</p>

<pre><code>&lt;span id="result0"&gt;&lt;/span&gt;
&lt;span id="result1"&gt;&lt;/span&gt;
&lt;span id="result2"&gt;&lt;/span&gt;
</code></pre>

<p>How about this alternate instead?</p>

<pre><code>&lt;button type="button" onClick="print(this)"&gt; 0 &lt;/button&gt;
&lt;button type="button" onClick="print(this)"&gt; 1 &lt;/button&gt;
&lt;button type="button" onClick="print(this)"&gt; 2 &lt;/button&gt;

You have entered
&lt;span id="displaySpan"&gt;&lt;/span&gt;

&lt;script&gt;
    var displaySpan = document.getElementById('displaySpan')
    function print(button){
        displaySpan.innerHTML += button.innerHTML
    }
&lt;/script&gt;
</code></pre>


blocks|key|4061534|text|使用普通的JavaScript：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4061535|​|4061536|function+showButtonClicked+()
{
++//+Get+the+output+node
++let+output+=+document.querySelector(+'.output'+);

++//+Get+the+buttons+parent+and+add+a+click+event+on+it
++document.querySelector(+'.buttons'+).addEventListener(+'click',+()+=>+{
++++
++++//+Get+the+clicked+element
++++let+target+=+event.target;
++++
++++//+If+it+is+not+a+button,+return
++++if+(+target.nodeName+!==+'BUTTON'+)+return;
++++
++++//+Add+the+button+number+to+the+output
++++output.textContent+%2B=+`+${+target.textContent+}`;
++
++});
}

showButtonClicked();|code-block|syntax|javascript|4061537|<div+class="buttons">
++<button>0</button>
++<button>1</button>
++<button>2</button>
++<button>3</button>
++<button>4</button>
++<button>5</button>
++<button>6</button>
++<button>7</button>
++<button>8</button>
++<button>9</button>
</div>

<p>You+have+entered+:+</p>
<div+class="output"></div>|4061538|4061539|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Using vanilla JavaScript :</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function showButtonClicked ()
{
  // Get the output node
  let output = document.querySelector( '.output' );

  // Get the buttons parent and add a click event on it
  document.querySelector( '.buttons' ).addEventListener( 'click', () =&gt; {
    
    // Get the clicked element
    let target = event.target;
    
    // If it is not a button, return
    if ( target.nodeName !== 'BUTTON' ) return;
    
    // Add the button number to the output
    output.textContent += ` ${ target.textContent }`;
  
  });
}

showButtonClicked();</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="buttons"&gt;
  &lt;button&gt;0&lt;/button&gt;
  &lt;button&gt;1&lt;/button&gt;
  &lt;button&gt;2&lt;/button&gt;
  &lt;button&gt;3&lt;/button&gt;
  &lt;button&gt;4&lt;/button&gt;
  &lt;button&gt;5&lt;/button&gt;
  &lt;button&gt;6&lt;/button&gt;
  &lt;button&gt;7&lt;/button&gt;
  &lt;button&gt;8&lt;/button&gt;
  &lt;button&gt;9&lt;/button&gt;
&lt;/div&gt;

&lt;p&gt;You have entered : &lt;/p&gt;
&lt;div class="output"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I have 10 buttons 0-9. I want to print out all the numbers of the buttons in order of their 'click'. For example, If I click on buttons 5,4,3,2,1 then it should be printed like 54321 but with my coding it is printing in ascending order only. Can anybody help me figure this one out?</p>

<pre><code>function nmbr0(){
var displaySpan = document.getElementById('result0');
displaySpan.innerHTML = 0;
}
function nmbr1(){
var displaySpan = document.getElementById('result1');
displaySpan.innerHTML = 1;
}
function nmbr2(){
var displaySpan = document.getElementById('result2');
displaySpan.innerHTML = 2;
}

 &lt;button type="button" onClick="nmbr0()"&gt; 0 &lt;/button&gt;
 &lt;button type="button" onClick="nmbr1()"&gt; 1 &lt;/button&gt;
 &lt;button type="button" onClick="nmbr2()"&gt; 2 &lt;/button&gt;

You have entered
&lt;span id="result0"&gt;&lt;/span&gt;
&lt;span id="result1"&gt;&lt;/span&gt;
&lt;span id="result2"&gt;&lt;/span&gt;
</code></pre>

<p>This is my output after clicking on 4321:</p>

<p><a href="https://i.stack.imgur.com/BcP6h.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BcP6h.png" alt="enter image description here"></a></p>


Print all buttons in order of their click Javascript

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有10个按钮0-9。我想按“点击”的顺序打印出所有按钮的编号。例如，如果我点击按钮5,4,3,2,1，那么它应该像54321一样打印，但在我的编码中，它只按升序打印。有人能帮我解决这个问题吗？function nmbr0(){var displaySpan = document.getElementById('res...

问按单击Javascript的顺序打印所有按钮
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按单击Javascript的顺序打印所有按钮EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问按单击Javascript的顺序打印所有按钮
EN