javascript - 基本计算器，如何使按钮输入值到文本字段

Question

我是 JavaScript 的初学者，我正在做这个基本的计算器，最终设法让它看起来像我想要的那样，但我真的在努力研究如何让按钮“工作”——将它们的值输入文本字段。我只能为此使用 JavaScript。尝试通过谷歌搜索弄清楚，但有些事情我不明白，因为我尝试了几种方法但它仍然不起作用。请帮助我解决这个问题，我将不胜感激，因为我也想理解它:)

HTML:

<div class="calculator">
<div class="screen"><input type=text name="display" id="display" 
disabled></div>
<div><input type="button" name= "seven" value="7"></div>
<div><input type="button" name="eight" value="8"></div>
<div><input type="button" name="nine" value="9"></div>
<div><input type="button" name="divide" value="/"></div>
<div><input type="button" name="four" value="4"></div>
<div><input type="button" name="five" value="5"></div>
<div><input type="button" name="six" value="6"></div>
<div><input type="button" name="multiply" value="*"></div>
<div><input type="button" name="one" value="1"></div>
<div><input type="button" name="two" value="2"></div>
<div><input type="button" name="three" value="3"></div>
<div><input type="button" name="minus" value="-"></div>
<div><input type="button" name="clear" value="C"></div>
<div><input type="button" name="zero" value="0"></div>
<div><input type="button" name="equal" value="="></div>
<div><input type="button" name="plus" value="+"> </div>
</div>

CSS:

.calculator {
display: grid;
grid-template-rows: 35px 35px 35px 35px 35px;
grid-template-columns: 35px 35px 35px 35px;
}
.screen {
grid-column-start: 1;
grid-column-end: 5;
}
input[type="button"] {
width: 35px;
height: 35px;
}
input[type="text"] {
width: 140px;
height: 35px;
}

Answer 1

作为初学者，您可能想看看 for loops和 event listeners以便更好地理解此解决方案。

---

解决方案:

为您的每个按钮添加一个 eventListener，这样您就可以触发一些函数来执行“真实”计算器上的按钮所执行的操作。

// Get all your buttons
var buttons = document.querySelectorAll('input[type="button"');

// Get your input field
var input = document.getElementById('display');

// Add a eventListener to every button
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('click', function() { // when a button gets clicked, an function will fire
    input.value += this.value; // 'this' is the button that gets clicked. We add its value to the input field
  });
}

.calculator {
  display: grid;
  grid-template-rows: 35px 35px 35px 35px 35px;
  grid-template-columns: 35px 35px 35px 35px;
}

.screen {
  grid-column-start: 1;
  grid-column-end: 5;
}

input[type="button"] {
  width: 35px;
  height: 35px;
}

input[type="text"] {
  width: 140px;
  height: 35px;
}

<div class="calculator">
  <div class="screen"><input type=text name="display" id="display" disabled></div>
  <div><input type="button" name="seven" value="7"></div>
  <div><input type="button" name="eight" value="8"></div>
  <div><input type="button" name="nine" value="9"></div>
  <div><input type="button" name="divide" value="/"></div>
  <div><input type="button" name="four" value="4"></div>
  <div><input type="button" name="five" value="5"></div>
  <div><input type="button" name="six" value="6"></div>
  <div><input type="button" name="multiply" value="*"></div>
  <div><input type="button" name="one" value="1"></div>
  <div><input type="button" name="two" value="2"></div>
  <div><input type="button" name="three" value="3"></div>
  <div><input type="button" name="minus" value="-"></div>
  <div><input type="button" name="clear" value="C"></div>
  <div><input type="button" name="zero" value="0"></div>
  <div><input type="button" name="equal" value="="></div>
  <div><input type="button" name="plus" value="+"> </div>
</div>

请记住，您需要处理您的 =、+、-、/、* 和 C 按钮不同!否则，您只需将它们的值添加到您的输入字段。