按其單擊順序打印所有按鈕

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>