Question

我必须遵循以下代码：

<div class="overall">
  <div class="calccont">
    <input type="text" class="output">
  </div>
  <div class="buttons">
    <button class="btn" type="button" value="1">1</button>
    <button class="btn" type="button" value="2">2</button>
    <button class="btn" type="button" value="3">3</button>
    <button class="btn" type="button" value="4">4</button>
  </div>
</div>

和

    var allBtns = document.querySelectorAll(".btn");
    for ( i = 0; i < allBtns.length; i++ ) {
    allBtns[i].addEventListener("click", function(){
    document.querySelector(".output").value += allBtns[i].getAttribute("value");
  });
}

我试图在JS中构建一个计算器，预期结果是将所有按钮值放在输入中，但它似乎不起作用。任何帮助将不胜感激。

Answer 1

您应该使用this访问点击事件中的当前按钮：

＆＃13;

var allBtns = document.querySelectorAll(".btn");
for (i = 0; i < allBtns.length; i++) {
  allBtns[i].addEventListener("click", function() {
    document.querySelector(".output").value += this.getAttribute("value");
  });
}

＆＃13;

<div class="overall">
  <div class="calccont">
    <input type="text" class="output">
  </div>
  <div class="buttons">
    <button class="btn" type="button" value="1">1</button>
    <button class="btn" type="button" value="2">2</button>
    <button class="btn" type="button" value="3">3</button>
    <button class="btn" type="button" value="4">4</button>
    <div>

＆＃13;

Answer 2

您应该使用this关键字来访问点击的按钮，然后像这样获取value：

var allBtns = document.querySelectorAll(".btn");
for ( i = 0; i < allBtns.length; i++ ) {
	allBtns[i].addEventListener("click", function(){
  document.querySelector(".output").value += this.getAttribute("value");
	});
}

<div class="overall">
<div class="calccont">
  <input type="text" class="output">
</div>
<div class="buttons">
  <button class="btn" type="button" value="1">1</button>
  <button class="btn" type="button" value="2">2</button>
  <button class="btn" type="button" value="3">3</button>
  <button class="btn" type="button" value="4">4</button>
<div>

有关this关键字的更多信息：

在大多数情况下，其值取决于函数的大小调用。它不能在执行期间通过赋值设置，也可能是每次调用函数时都不同。 ES5引入了绑定无论如何设置函数的值的方法调用，ECMAScript 2015引入了箭头函数词法范围（它被设置为封闭的这个值执行上下文）。

旁注：您在所发布的代码中的第一个<标记中遗漏了div，这可能会导致您遇到一些问题不是复制粘贴遗漏。

Javascript计算器问题

2 个答案: