Question

我是JavaScript的初学者，我正在做这个基本的计算器，最终设法使它看起来像我想要的方式，但我真的很努力如何制作按钮＆＃34; work＆＃34; - 将其值输入文本字段。我只能使用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按钮！否则，您只需将其值添加到输入字段。

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

1 个答案: