所以,正如你在我的代码中看到的,我点击的任何按钮都会被输出到控制台。我希望它显示在输入type=“textfield”中,我可能会错过一些逻辑,在这里我也可以计算两个数字。请记住,我是Javascript新手,这是我的第一个项目。
我需要在文本字段中显示总和。
const buttons = document.querySelectorAll("input[type=button]");
const length = buttons.length;
for (let i = 0; i < length; i++) {
buttons[i].addEventListener("click", handle);
}
function handle(event) {
const value = event.target.value;
switch (value) {
case "+":
console.log("+ was clicked");
break;
case "-":
console.log("- was clicked");
break;
case "*":
console.log("+ was clicked");
break;
case "/":
console.log("/ was clicked");
break;
default:
//console.log("%s was clicked", value);
var myInput = document.getElementById("equal");
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dizzy Calculator</title>
</head>
<body bgcolor="#b3b3cc" text="white">
<form name="calculator">
<h1>Calculator</h1>
<div class="num">
<tr>
<td>
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="+">
</td>
</tr>
<br>
<tr>
<td>
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
</td>
</tr>
<br>
<tr>
<td>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="*">
</td>
</tr>
<br>
<tr>
<td>
<input type="button" value="/">
<input type="button" value="0">
<input type="reset" value="Reset">
</td>
</tr>
<br>
<input type="button" value="=" id="equal" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
<br>Solution is <input type="textfield" name="ans" value="">
</div>
</form>
</body>
</html>
最佳答案
首先我会在你的文本字段中添加一个ID。
<input id="textfield" type="text" name="ans" value="">
然后添加一些代码,将单击的数字追加到文本字段中。
default:
//console.log("%s was clicked", value);
var myInput = document.getElementById("equal");
// add value of button to textfield
document.getElementById("textfield").value += value;
你还必须添加代码来处理数学问题。试着使用上面的代码,如果你卡住了就发帖子。