javascript - 基本计算器,如何使按钮输入值到文本字段
问题描述
我是 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;
}
解决方案
作为初学者,您可能想了解一下for 循环和事件侦听器,以更好地理解此解决方案。
解决方案:
为您的每个按钮添加一个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
推荐阅读
- python - 使用 ctypes 从 C 结构数组到 NumPy 数组的高效转换
- sql - 在不中断正在进行的插入的情况下扫描大表以删除记录的更好方法
- javascript - 如何在 Cordova 中使用平台预装的铃声?
- javascript - 使用不带href的锚元素来切换单独元素(div)的“隐藏”属性,不使用JavaScript
- amazon-web-services - AWS. How to set permisson PutObject for folder, but not on whole container?
- time-complexity - 内部循环是如何执行“n/i”次的?
- html - CSS 下划线菜单
- scala - 如何正确编写可能失败的 foldLeft 函数?
- javascript - 访问数组内的对象
- python - 导入时间和日期