如何在 JavaScript 中的一個函數中顯示每個按鈕

Question

所以，我正在嘗試構建一個計算器，我想做的第一件事就是在我的輸出中顯示所有按鈕。 我創建了一個名為 displayButtons 的函數，在里面，我通過 id 獲得了前 2 個按鈕，但是，當我嘗試顯示它們時，只顯示數字 2。 解決此問題的一種方法是為每個數字創建一個函數，然后它會起作用，但這不是我想要的。 我也嘗試過將每個數字的函數嵌套在一個函數中，但我無法在點擊時正確調用它。 有任何想法嗎？ 提前致謝！

HTML 代碼：

<div id="output"></div>
        <div class="numbers">
            <button value="1" id="one" onclick="displayButtons()">1</button>
            <button value="2" id="two" onclick="displayButtons()">2</button>

JS代碼：

function displayButtons() {

    var one = document.getElementById("one").value;
    document.getElementById("output").innerHTML = one;


    var two = document.getElementById("two").value;
    document.getElementById("output").innerHTML = two

}

Answer 1

你試過for循環嗎？ 您可以使用閉包或“let”關鍵字或單獨的函數添加單擊功能。在 codepen 中運行以下命令，看看它是如何工作的，以及這是否有用。

    function createButtons() {
       //let is block scoped, not function scoped
        for (let i = 1; i <= 5; i++) {
          var body = document.getElementsByTagName("BODY")[0];
          var button = document.createElement("BUTTON");
          button.innerHTML = 'Button ' + i;
          button.onclick = function() {
               alert('This is button ' + i);
          }
          body.appendChild(button);
        }
     }
      
     createButtons();

Answer 2

有多種解決方案，但這里有一個簡單的解決方案：您可以使用事件數據來獲取單擊按鈕的信息，然后您可以使用這些值做您想做的事情。

HTML

<div id="output"></div>
<div class="numbers">
  <button value="1" id="one">1</button>
  <button value="2" id="two">2</button>
</div>

JS

document.querySelectorAll('.numbers button').forEach(button => { 
  button.addEventListener('click', (e) => {
    console.log(e.target.id, e.target.value)
  })
})

Answer 3

要在單擊數字時顯示輸出，您可以像這樣在函數內傳入this對象

<button value="1" id="one" onclick="displayButtons(this)">1</button>

當您單擊它時，您將收到函數內的按鈕節點完整代碼將是

   <div class="numbers">
        <button value="1" id="one" onclick="displayButtons(this)">1</button>
        <button value="2" id="two" onclick="displayButtons(this)">2</button>
    </div>


    <script>
        function displayButtons(button) {
            document.getElementById("output").innerHTML += button.value
        }
    </script>

Answer 4

您不斷覆蓋innerHTML ，這就是為什么您只看到 2.

我建議你改變你的方法。 您所有的按鈕都在div.numbers中。 將單擊事件偵聽器添加到數字 div。 如果按下任何按鈕，此事件偵聽器將觸發，因為單擊事件會冒泡。 這稱為事件委托。

在 click 事件處理程序中，您可以查看單擊了哪個按鈕並將單擊按鈕的value添加到div#output 。

 const output = document.querySelector('#output'); const numbers = document.querySelector('.numbers'); numbers.addEventListener('click', ({ target }) => { if (!target.hasAttribute('value')) { return; } output.textContent += target.value; });

 <div id="output"></div> <div class="numbers"> <button value="1">1</button> <button value="2">2</button> <button value="3">3</button> <button value="4">4</button> <button value="5">5</button> </div>

Answer 5

每次按下按鈕時，您都會覆蓋整個 innerHTML，因此您將用新內容替換整個內容。

您應該使用 += 運算符附加值

此外，您可以考慮使用 innerText 代替 innerHTML，並使用 addEventListener 代替 onclick=

<div id="output"></div>
<div class="numbers">
    <button value="1" id="one">1</button>
    <button value="2" id="two">2</button>
</div>

... 之后 ...

<script>
document.querySelector(".numbers").addEventListener('click', e => {
    if( e.target.nodeName === "BUTTON" )
        document.getElementById("output").innerText += e.target.value;
});
</script>

Answer 6

您必須在 onclick 參數中獲取每個按鈕的 id，例如： onclick= displayButtons(id) 它會為每個按鈕創建不同的點擊事件然后

function displayButton(id){
let oldValue = document.getElementById("output").innerHtml
document.getElementById("output").innerHTML = oldValue + id;}