如何使用事件处理程序在DOM中单击和显示数据

Question

我正在尝试构建一个简单的JavaScript计算器。我的功能部分有问题。我无法让数字显示在显示屏上，而且我的事件处理程序也有问题，我可以让所有数字点击。

HTML

<form name="calculator">
<div class="calculator_container">
<table id="calculator">
<caption>
<input type="text" name="display" id="display" maxlength="40">
</caption>
<tr>
<td><input type="button" value="AC" class="btn" id="allClear"></td>
<td><input type="button" value="C" class="btn" id="clear"></td>
<td><input type="button" value="+/-" class="btn" id="plusMinus"></td>
<td><input type="button" value="/" class="btn" id="operate"></td>
</tr>
<tr>
<td><input type="button" name="seven" value="7" class="btn" id="number"></td>
<td><input type="button" name="eight" value="8" class="btn" id="number"></td>
<td><input type="button" name="nine" value="9" class="btn" id="number"></td>
<td><input type="button" value="x" class="btn" id="operator"></td>
</tr>
<tr>
<td><input type="button" name="four" value="4" class="btn" id="number"></td>
<td><input type="button" name="five"  value="5" class="btn" id="number" ></td>
<td><input type="button" name="six"  value="6" class="btn" id="number"></td>
<td><input type="button" value="-" class="btn" id="operator"></td>
</tr>
<tr>
<td><input type="button" name="one"  value="1" class="btn" id="number"></td>
<td><input type="button" name="two"  value="2" class="btn" id="number"></td>
<td><input type="button" name="three"  value="3" class="btn" id="number"></td>
<td><input type="button" value="+" class="btn" id="operator"></td>

</tr>

<tr>
<td><input type="button" name="zero"  value="0" class="btn" id="number"></td>
<td><input type="button" value="." class="btn" id="dot"></td>
<td><input type="button" value="=" class="btn" id="calculate"></td>

</tr>
</table>
</div>
</form>

JS-

let memory = "0";
let current = "0";
let operation = 0;
let maxLength = 30; 

const addDigit = (dig) => {
if (current.length > maxLength){ 
current = "Aargh! Too long"; //limit length
} else { if ((eval(current) == 0) && (current.indexOf(".") == -1)
){ current = dig;
} else { current = current + dig;
};
}; };
document.calculator.display.value = current;
document.getElementById("number").addEventListener("click", addDigit);


const dot = () => {
if (current.length == 0) {
current = "0.";
} else {
if (current.indexOf(".") == -1) {
current = current + ".";
};
};
}
document.calculator.display.value = current;
document.getElementById("dot").addEventListener("click", dot);

const plusMinus = () => {
if (current.indexOf("-") == 0) {
current = current.substring(1);
} else {
current = "-" + current;
};
document.calculator.display.value = current;
}
document.getElementById("plusMinus").addEventListener("click", plusMinus);

const clear = () => {
current = "0";
document.calculator.display.value = current;
}
document.getElementById("clear").addEventListener("click", clear);

const allClear = () =>  {
current = "0";
operation = 0;
memory = "0";
document.calculator.display.value = current;
}
const operate = (op) => {
if (op.indexOf("*") > -1) {operation = 1; };
if (op.indexOf("/") > -1) {operation = 2; };
if (op.indexOf("+") > -1) {operation = 3; };
if (op.indexOf("-") > -1) {operation = 4; };
memory = current;
current = "";
document.calculator.display.value = current;
}
document.getElementById("operator").addEventListener("click", operate);

const calculate = () => {
if (operation == 1) { current = eval(memory) * eval(current); };
if (operation == 2) { current = eval(memory) / eval(current); };
if (operation == 3) { current = eval(memory) + eval(current); };
if (operation == 4) { current = eval(memory) - eval(current); };
operation = 0;
memory = "0";
document.calculator.display.value = current;
}
document.getElementById("calculate").addEventListener("click", calculate);
const fixCurrent = () =>  {
current = document.calculator.display.value;
current = "" + parseFloat(current);
if (current.indexOf("NaN") != -1) {
current = "Error!";
};
document.calculator.display.value = current;
}

我知道应该有一个简单的解决办法，但我已经走到了死胡同，我想得到一些帮助来完成这个项目。

Answer 1

首先：ID对每个元素都应该始终是唯一的。你也应该避免为每个按钮使用一个表单，这对我来说是糟糕的编码风格。只需使用按钮。此外，您应该将输入框设置为只读，这样用户就不能输入他想要的内容。

这是一个为包装器div内的每个按钮添加事件处理程序的最小示例

var wrapper = document.getElementById('wrapper');
wrapper.addEventListener('click', (event) => {
const isButton = event.target.nodeName === 'BUTTON';
if (!isButton) {
return;
}
var data = document.getElementById("data");
data.value = data.value + event.target.value;
})

<input type="text" id="data" readonly>
<div id="wrapper">
<button type="button" value="1">1</button>
<button type="button" value="2">2</button>
</div>