单击 ADD div 时，文本框上应出现“+”。 SUBSTRACT、MULTIPLY 和 DIVIDE 也是如此。我无法让运算符显示在文本框上。这是我到目前为止所得到的。
<!DOCTYPE html>
<html>
<body>
<div class="leftDiv">
<div id="colorblock">
<div id = "add" class = "blocks" onclick="displayOptr()">ADD</div>
<div id = "subtract" class = "blocks">SUBTRACT</div>
<div id = "multiply" class = "blocks">MULTIPLY</div>
<div id = "divide" class = "blocks">DIVIDE</div>
</div>
</div>
<input type = "text" size="1" id = "operator">
<script>
function displayOptr() {
var optrArr =["+","-","*","/"];
for (var i = 0; i < optrArr.length; i++){
if (i==0){
document.getElementById("operator").value = "+";
} else if (i==1){
document.getElementById("operator").value = "-";
} else if (i==2){
document.getElementById("operator").value = "*";
} else if (i==3){
document.getElementById("operator").value = "/";
}
}
</script>
</body>
</html>最佳答案
目前，您的 if 语句缺少一个右大括号，这会导致错误阻止您的代码运行。
修复该问题后，您的代码将循环遍历您的数组，并在每次迭代时将其中一个符号放入文本框中。但是，在下一次迭代中，它只是替换了那个符号。代码完成后，您将始终在文本框中看到 /。
相反，只需将要显示的符号传递给函数。
此外，不要将事件处理程序设置为 HTML 属性(onclick、onmouseover 等)，因为这种旧语法会创建“意大利面条代码”，难以阅读，不能很好地扩展，创建隐式全局包装函数更改 this 绑定(bind)并且不遵循 W3C 事件注册标准。改为使用 addEventListener() 在 JavaScript 中进行事件绑定(bind)。
这是一个工作版本:
<!DOCTYPE html>
<html>
<body>
<div class="leftDiv">
<div id="colorblock">
<div id = "add" class = "blocks" onclick="displayOptr()">ADD</div>
<div id = "subtract" class = "blocks">SUBTRACT</div>
<div id = "multiply" class = "blocks">MULTIPLY</div>
<div id = "divide" class = "blocks">DIVIDE</div>
</div>
</div>
<input type = "text" size="1" id = "operator">
<script>
// Get references to the elements you'll need:
var a = document.getElementById("add");
var s = document.getElementById("subtract");
var m = document.getElementById("multiply");
var d = document.getElementById("divide");
var output = document.getElementById("operator");
// Set up click event handlers that each call the same function but pass it
// a different value.
a.addEventListener("click", function(){ displayOptr("+") });
s.addEventListener("click", function(){ displayOptr("-") });
m.addEventListener("click", function(){ displayOptr("*") });
d.addEventListener("click", function(){ displayOptr("/") });
function displayOptr(input) {
// Just take the input and display in the textbox
output.value = input;
}
</script>
</body>
</html>关于javascript - 使符号运算符出现在文本框上时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43400538/