Question

单击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>

Answer 1

目前，您缺少if语句的结束大括号，这导致错误导致代码无法运行。

修复之后，您的代码循环遍历您的数组，并在每次迭代时，将其中一个符号放入文本框中。但是，在下一次迭代中，它只是替换了那个符号。代码完成后，您将始终在文本框中显示/。

相反，只需将您想要显示的符号传递给函数。

此外，不要将事件处理程序设置为HTML属性（onclick，onmouseover等），因为这个旧语法创建“spaghetti代码”，难以阅读，不能很好地扩展，创建隐式全局包装函数更改this绑定并且不遵循W3C事件注册标准。使用addEventListener()代替您在JavaScript中绑定事件。

这是一个有效的版本：

<!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>

Answer 2

由于方法循环4次，它将始终显示/。试试这个

<!DOCTYPE html>
<html>
  <body>
    <div class="leftDiv">
      <div id="colorblock">
        <div id = "add" class = "blocks" onclick="displayOptr('+')">ADD</div>
        <div id = "subtract" class = "blocks" onclick="displayOptr('-')">SUBTRACT</div>
        <div id = "multiply" class = "blocks" onclick="displayOptr('*')">MULTIPLY</div>
        <div id = "divide" class = "blocks" onclick="displayOptr('/')">DIVIDE</div>
      </div>
    </div>
    <input type = "text" size="1" id = "operator">
    <script>
      function displayOptr(symbol) {
          document.getElementById("operator").value = symbol;
      }
    </script>
  </body>
</html>

Answer 3

我觉得你过分复杂了。

我建议您将代码更改为如下所示：

<div class="leftDiv">
            <div id="colorblock">
                <div data-operator="+" class="blocks">ADD</div>
                <div data-operator="-" class="blocks">SUBTRACT</div>
                <div data-operator="*" class="blocks">MULTIPLY</div>
                <div data-operator="/" class="blocks">DIVIDE</div>
            </div>
        </div>
<input type="text" size="1" id ="operator" placeholder="" />

请注意，data-operator上的div属性正在以下脚本中使用：

var operatorInput = document.getElementById("operator") // your input field
var buttonList = document.querySelectorAll('.blocks') // Stores all elements with the blocks class in an array

for(var i = 0; i < buttonList.length; i++){ // loops through all selected elements
    buttonList[i].addEventListener("click", function(e){ // attaches a function to each element
        operatorInput.value = e.target.getAttribute("data-operator") // sets the value of the input field according to the elements data-operator value
  })
}

通过这种方式，您可以以编程方式选择所有按钮并循环浏览它们，并将它们与事件监听器连接，该事件监听器在单击时触发功能。

当您点击其中一个按钮时，该功能会发出一个事件（在代码中表示为e），该事件指的是按下的按钮。按下的按钮由event.target表示，其中包含data-operator属性，您可以使用该属性在输入字段中显示所需的符号。

如果您有其他问题，请随时提出。

这是代码https://jsfiddle.net/66gu0zur/

的一个工作小提琴示例

Answer 4

你也可以检查一下。相同的代码只是微小的变化

function displayOptr(i) {
    var optrArr =["+","-","*","/"];
   	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 = "/";    
     }                
}

<div class="leftDiv">
    <div id="colorblock">
        <div id = "add" class = "blocks" onclick="displayOptr(0)">ADD</div>
    		<div id = "subtract" onclick="displayOptr(1)" class = "blocks">SUBTRACT</div>
    		<div id = "multiply" onclick="displayOptr(2)" class = "blocks">MULTIPLY</div>
    		<div id = "divide" onclick="displayOptr(3)" class = "blocks">DIVIDE</div>
    </div>
</div>
    <input type = "text" size="1" id = "operator">

Answer 5

如果你想要的是根据选择的操作显示每个符号，这是一个有效的解决方案：

＆＃13;

<!DOCTYPE html>
    <html>
    <body>
    
    <div class="leftDiv">
    			<div id="colorblock">
    				<div id = "add" class = "blocks" onclick="displayOptr(this);">ADD</div>
    				<div id = "subtract" class = "blocks" onclick="displayOptr(this);">SUBTRACT</div>
    				<div id = "multiply" class = "blocks" onclick="displayOptr(this);">MULTIPLY</div>
    				<div id = "divide" class = "blocks" onclick="displayOptr(this);">DIVIDE</div>
    			</div>
    		</div>
    <input type = "text" size="1" id = "operator">
    
    
    <script>
    function displayOptr(that) {
        var val = that.id;
          if (val == "add"){
            	document.getElementById("operator").value = "+";
            } else if (val == "subtract"){
            	document.getElementById("operator").value = "-";
            } else if (val == "multiply"){
            	document.getElementById("operator").value = "*";
            } else if (val == "divide"){
            	document.getElementById("operator").value = "/"; 
            }
    }
    </script>
    
    </body>
    </html>

＆＃13;

你走在正确的轨道上，你的for循环遍历每个选择器，所以你只能看到/，因为那是最后一个。就像@ScottMarucs所说，你也错过了}。

制作标志操作员的麻烦出现在文本框中

5 个答案: