我正在尝试构建一个简单的计算器。问题是当我按下一个按钮时，它没有显示在显示屏上。
var loadPage = function() { //using on load on the body of the html
var one = document.getElementById("1"); //geting the id of the numbers
one.addEventListener("1", clickListener, false);
var two = document.getElementById("2");
two.addEventListener("2", clickListener, false);
var three = document.getElementById("3");
three.addEventListener("3", clickListener, false);
//and so on until 9
};
function clickListener(e) //a click listener for the numbers
{
var value = document.getElementById("calculator__display");
if (e.type == "1")
value.innerHTML = e;
if (e.type == "2")
value.innerHTML = e;
if (e.type == "3")
value.innerHTML = e;
//and so on until 9
}<!doctype html5>
<html>
<head>
<link rel="stylesheet" href="Calculator.css" />
<script type="text/javascript" src="Calculator.js"></script>
</head>
<body onload="loadPage()">
<div class="calculator__display">0</div>
<div class="operation_keys">
<button class="key--operator" id="add">+</button>//the operation buttons
<button class="key--operator" id="subtract">-</button>
<button class="key--operator" id="multiply">x</button>
<button class="key--operator" id="divide">÷</button>
</div>
<div class="number_keys">//the numbers
<button id="7">7</button>// 7,8,9
<button id="8">8</button>
<button id="9">9</button>
<button class="key--equal" id="calculate">=</button>//the equal button
<button id="4">4</button>
<button id="5">5</button>
<button id="6">6</button>
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
<button id="0">0</button>
<button id="decimal">.</button>//the decimal point
<button id="clear">AC</button>//the reset button
</div>
</body>
</html>当我点击按钮时，我希望显示数字。我不明白为什么没有显示号码。有没有人有任何建议或可以帮助我理解我做错了什么？
最佳答案
您的代码中存在一些问题:
addEventListener期望的第一个参数是 事件。您应该传递"click"，而不是"1"、"2"等。calculator__display是一个类，而不是一个 id。document.getElementById("calculator__display");将不起作用 除非你给元素添加一个 id。e.type是由事件监听器触发的事件类型，而不是您使用的自定义参数- ID 不能以数字开头(尽管它适用于大多数浏览器)。
我正在使用循环来添加事件监听器。这会删除很多重复的代码。 我已将自定义数据属性添加到保存按钮数值的按钮。
希望这会给您足够的想法来处理您的计算器的其余部分。
var loadPage = function() {
var numberKeys = document.getElementsByClassName('number_keys');
for (let i=0;i<numberKeys.length;i++) {
numberKeys[i].addEventListener('click', clickListenerNumber, false);
}
var operationKeys = document.getElementsByClassName('operation_keys');
for (let i=0;i<operationKeys.length;i++) {
operationKeys[i].addEventListener('click', clickListenerOperation, false);
}
};
function clickListenerNumber(e) {
var value = document.getElementById("calculator__display");
value.innerHTML = e.target.getAttribute('data-value');
}
function clickListenerOperation(e) {
/* TODO
* Handle operation button click
*/
}#calculator__display {
background: yellow;
}
button {
display: inline-block;
}<body onload="loadPage()">
<div id="calculator__display">0</div>
<div class="operation_keys">
<button class="key--operator" id="add">+</button>
<button class="key--operator" id="subtract">-</button>
<button class="key--operator" id="multiply">x</button>
<button class="key--operator" id="divide">÷</button>
</div>
<div class="number_keys">
<button id="seven" data-value="7">7</button>
<button id="eight" data-value="8">8</button>
<button id="nine" data-value="9">9</button>
<button class="key--equal" id="calculate">=</button>
<button id="four" data-value="4">4</button>
<button id="five" data-value="5">5</button>
<button id="six" data-value="6">6</button>
<button id="one" data-value="1">1</button>
<button id="two" data-value="2">2</button>
<button id="three" data-value="3">3</button>
<button id="zero" data-value="0">0</button>
<button id="decimal">.</button>
<button id="clear">AC</button>
</div>
</body>有一些明显的问题是这段代码没有尝试修复的，例如，每次单击数字时您都会替换显示值。您将如何输入值“100”？
关于javascript - 构建一个简单的计算器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51972271/