我有点卡在这里，作为一个有抱负的网络开发人员，我在这个项目上取得了很多进展，但无法弄清楚这个功能。无法弄清楚为什么我的事件侦听器不返回计算器方程的值，而是带回原始元素而不是输入标签。运行代码看看我的意思。我以为我的 getElementID 会负责设置元素以接收值，但我想不是？
<!DOCTYPE html>
<html>
<head>
<title>WebCalc</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./webcalc.css">
</head>
<body>
<h1>Simple Calculator</h1>
<form>
<fieldset>
<label for="input1"></label><br>
<input id="input1" type="number" placeholder="Number 1"><br>
</fieldset>
<div class="buttons">
<button id="button1" type="button">+</button>
<button id="button2" type="button">-</button>
<button id="button3" type="button">*</button>
<button id="button4" type="button">/</button>
</div>
<fieldset>
<label for="input2"></label><br>
<input id="input2" type="number" placeholder="Number 2"><br>
</fieldset>
<input id="result" type="number" readonly>
<div id="clearScreen">
<button type="button">Clear</button>
</div>
</form>
</body>
<script>
function buttons() {
var in1 = document.getElementById("input1");
var in2 = document.getElementById("input2");
var res = document.getElementById("result");
var add = document.getElementById("button1");
var sub = document.getElementById("button2");
var mul = document.getElementById("button3");
var div = document.getElementById("button4");
add.addEventListener("click", function() {
res.textContent = in1.valueAsNumber + in2.valueAsNumber;
console.log(res);
});
}
buttons()
</script>
</html>
我做错了什么？
你说对了一部分， getElementByID 负责获取元素。使用 input.textContent，您可以将 中的元素作为字符串获取。我认为 in1.valueAsNumber 在这里没有发挥作用。你可以试试这个。我希望它有帮助。您可以根据您的要求更改 parseInt <=> parseFloat。
add.addEventListener("click", function() {
res.value = parseInt(in1.value) +parseInt( in2.value);
console.log(res.textContent);
});