我如何使这个 HTML 风格的计算器只能使用 JS 工作

Question

我已经被这个任务困了很长时间了。

基本上我有这个重写的 HTML 代码

<input type="text" id="num1" value="" placeholder="input whole number" />
<input type="text" id="num2" value="" placeholder="input whole number" />

<br> <br>
Click on a operator:
<br>

<input type="button" id="add" class="operator" value="+" />
<input type="button" id="subtract" class="operator" value="-" />
<input type="button" id="multiply" class="operator" value="*" />
<input type="button" id="divide" class="operator" value="/" />

<p class="semig">Result is: <span id="resultat">???</span></p>

我只允许使用 JS 使计算器工作，而不能编辑 HTML。

通常我会在 JS 中编写 function 但在 HTML 代码中调用 function。

谁能帮我这个？

Answer 1

考虑一个通用事件处理程序：

function buttonClick(event) {
  alert("You clicked " + event.target.id);
}

这些按钮具有 ID，因此您可以将事件侦听器附加到它们。

document.getElementById("add").addEventListener("click", buttonClick, false);
// etc... for the other buttons

更好的是，它们有类，因此您可以查找它们并附加事件侦听器：

Array.from(document.querySelectorAll("button.operator")).forEach(btn => {
  btn.addEventListener("click", buttonClick, false);
});

一个更高级的选项是在例如document.body上添加点击处理程序并使用事件传播/冒泡来查看实际点击的元素。

Answer 2

您可以尝试使用此代码：

 var addButton = document.getElementById("add"); addButton.onclick = function() { calculate("+"); } var subtractButton = document.getElementById("subtract"); subtractButton.onclick = function() { calculate("-"); } var multiplyButton = document.getElementById("multiply"); multiplyButton.onclick = function() { calculate("*"); } var divideButton = document.getElementById("divide"); divideButton.onclick = function() { calculate("/"); } function calculate(operation) { var num1 = document.getElementById("num1").value; var num2 = document.getElementById("num2").value; try { eval("var result = " + num1.toString() + operation + num2.toString()); document.getElementById("resultat").innerHTML = result; } catch { alert("You must enter numbers in theses fills"); } }

 <html> <body> <input type="text" id="num1" value="" placeholder="input whole number" /> <input type="text" id="num2" value="" placeholder="input whole number" /> <br> <br> Click on a operator: <br> <input type="button" id="add" class="operator" value="+" /> <input type="button" id="subtract" class="operator" value="-" /> <input type="button" id="multiply" class="operator" value="*" /> <input type="button" id="divide" class="operator" value="/" /> <p class="semig">Result is: <span id="resultat">???</span></p> </body> </html>

我如何使这个 HTML 风格的计算器只能使用 JS 工作

问题描述

2 个解决方案

解决方案1
2 2020-06-23 21:52:54

解决方案2
0 2020-06-23 22:21:04

我如何使这个 HTML 风格的计算器只能使用 JS 工作

问题描述

2 个解决方案

解决方案1 2 2020-06-23 21:52:54

解决方案2 0 2020-06-23 22:21:04

解决方案1
2 2020-06-23 21:52:54

解决方案2
0 2020-06-23 22:21:04