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

Question

我有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>

这是我在单击4321之后的输出：

Answer 1

问题在于跨度已经按升序定义，因此即使您在前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>

Answer 2

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

var element = "";
$("button").click(function() {
  element += $(this).html(); //Get the button number
  $("#result").html(element);
})

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

Answer 3

您的代码意外地表现为您在每个按钮文本显示中使用ids，因此该顺序已经在0-10之间进行了预定义。

您可以将数字附加到html本身，如下所示

function nmbr(num){
var displaySpan = document.getElementById('numbers');
//appending one after another
displaySpan.innerHTML += num + ' ';
}

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>

Answer 4

使用原始JavaScript：

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 += ` ${ target.textContent }`;
  
  });
}

showButtonClicked();

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