JavaScript 如何在一个函数中显示每个按钮

Question

所以，我正在尝试构建一个计算器，我要做的第一件事就是在我的输出中显示所有按钮。我创建了一个名为 displayButtons 的函数，在内部，我通过 id 获得了前 2 个按钮，但是，当我尝试显示它们时，只显示数字 2。解决此问题的一种方法是为每个数字创建一个函数，然后它就会起作用，但这不是我想要的。我也试过将每个数字的函数嵌套在一个函数中，但我无法正确地调用它 onclick。有任何想法吗？提前致谢！

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' 关键字或单独的函数来添加点击功能。运行代码笔中的以下内容，看看它是如何工作的，以及这是否有用。


    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

您必须在 onclick 参数中获取每个按钮的 ID，例如： onclick=显示按钮（id）它将为每个按钮创建不同的点击事件然后

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

Answer 3

对此有多种解决方案，但这里有一个简单的解决方案：你可以使用事件数据来获取点击按钮的信息，然后你可以用这些值做你想做的事。

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 4

要在点击数字时显示输出，您可以像这样在函数中传入一个 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 5

你一直在覆盖 innerHTML，这就是你只看到 2 的原因。

我建议你改变你的方法。您所有的按钮都在 div.numbers 中。向数字 div 添加单击事件侦听器。如果按下任何按钮，此事件侦听器将触发，因为单击事件会冒泡。这称为事件委托。

在点击事件处理程序中，您可以看到哪个按钮被点击，并将被点击按钮的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 6

每次按下按钮时，都会覆盖整个 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>

JavaScript 如何在一个函数中显示每个按钮

How to display each buttons in one function in JavaScript

javascript

function

button