Javascript 按单击顺序打印所有按钮

我有10个按钮0-9。我想按按钮“点击”的顺序打印出所有按钮的编号。例如，如果我单击按钮5、4、3、2、1，那么它应该像54321一样打印，但我的编码只是按升序打印。有人能帮我弄清楚这个吗

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;
}

 <button type="button" onClick="nmbr0()"> 0 </button>
 <button type="button" onClick="nmbr1()"> 1 </button>
 <button type="button" onClick="nmbr2()"> 2 </button>

You have entered
<span id="result0"></span>
<span id="result1"></span>
<span id="result2"></span>

函数nmbr0（）{
var displaySpan=document.getElementById（'result0'）；
displaySpan.innerHTML=0；
}
函数nmbr1（）{
var displaySpan=document.getElementById（'result1'）；
displaySpan.innerHTML=1；
}
函数nmbr2（）{
var displaySpan=document.getElementById（'result2'）；
displaySpan.innerHTML=2；
}
0
1.
2.
你已经进去了

这是我单击4321后的输出：

---

首先，您不必为每个按钮编号创建函数，因为您可以使用选择器来实现。寻找一个简单的解决方案：

var元素=”；
$（“按钮”）。单击（函数（）{
元素+=$（this.html（）；//获取按钮编号
$（“#结果”）.html（元素）；
})

0
1.
2.
3.
4.
5.
6.
7.
8.
9
您已输入：

首先，您不必为每个按钮编号创建一个函数，因为您可以使用选择器。寻找一个简单的解决方案：

var元素=”；
$（“按钮”）。单击（函数（）{
元素+=$（this.html（）；//获取按钮编号
$（“#结果”）.html（元素）；
})

0
1.
2.
3.
4.
5.
6.
7.
8.
9
您已输入：

您的代码行为异常，因为您对每个按钮文本显示都使用了

id

，因此它们中的顺序已在0-10之间预定义

您可以像下面那样将数字附加到html本身

函数nmbr（num）{
var displaySpan=document.getElementById（'numbers'）；
//一个接一个地追加
displaySpan.innerHTML+=num+''；
}

您已输入



0
1.
2.
3.
4

您的代码行为异常，因为您对每个按钮文本显示都使用了

id

，因此它们中的顺序已在0-10之间预定义

您可以像下面那样将数字附加到html本身

函数nmbr（num）{
var displaySpan=document.getElementById（'numbers'）；
//一个接一个地追加
displaySpan.innerHTML+=num+''；
}

您已输入



0
1.
2.
3.
4

问题是跨距已按升序定义，因此即使在1之前打印2，它仍将进入“result2”跨距

<span id="result0"></span>
<span id="result1"></span>
<span id="result2"></span>

这个替代品怎么样

<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 += button.innerHTML
    }
</script>

0
1.
2.
你已经进去了
var displaySpan=document.getElementById（'displaySpan'）
功能打印（按钮）{
displaySpan.innerHTML+=button.innerHTML
}

问题在于，跨距已按升序定义，因此即使在1之前打印2，它仍会进入“result2”跨距

<span id="result0"></span>
<span id="result1"></span>
<span id="result2"></span>

这个替代品怎么样

<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 += button.innerHTML
    }
</script>

0
1.
2.
你已经进去了
var displaySpan=document.getElementById（'displaySpan'）
功能打印（按钮）{
displaySpan.innerHTML+=button.innerHTML
}

使用普通JavaScript：

函数showButtonClicked（）
{
//获取输出节点
让输出=document.querySelector（'.output'）；
//获取父按钮并在其上添加单击事件
document.querySelector（'.buttons'）。addEventListener（'click'，（）=>{
//获取单击的元素
让target=event.target；
//如果不是按钮，则返回
if（target.nodeName！=='BUTTON'）返回；
//将按钮编号添加到输出中
output.textContent+=`${target.textContent}`；
});
}
showButtonClicked（）

0
1.
2.
3.
4.
5.
6.
7.
8.
9
您已输入：

使用普通JavaScript：


函数showButtonClicked（）
{
//获取输出节点
让输出=document.querySelector（'.output'）；
//获取父按钮并在其上添加单击事件
document.querySelector（'.buttons'）。addEventListener（'click'，（）=>{
//获取单击的元素
让target=event.target；
//如果不是按钮，则返回
if（target.nodeName！=='BUTTON'）返回；
//将按钮编号添加到输出中
output.textContent+=`${target.textContent}`；
});
}
showButtonClicked（）

0
1.
2.
3.
4.
5.
6.
7.
8.
9
您已输入：

将结果存储在数组中，然后在准备显示单击内容时遍历该数组。将结果存储在数组中，然后在准备显示单击内容时遍历该数组。我想他们需要编号为0到9的按钮。我想他们需要编号为0到9的按钮。