如何在 switch 语句中传递按钮 ID 以执行该按钮应该执行的任何功能？答案

【问题标题】：how to Pass the button ID in a switch statement to do whichever function that button is supposed to do?如何在 switch 语句中传递按钮 ID 以执行该按钮应该执行的任何功能？
【发布时间】：2018-10-11 11:28:14
【问题描述】：

这是一个使用 HTML 和 Javascript 的简单计算器，我应该在按下相关按钮后使用 switch 语句来选择要执行的数学运算。我不知道我应该在开关内传递什么。这是我的代码。

<html>
<head>
<style>
p{
color:white;
 background-color:black;
 } 
 </style>
<script>
function simple_calculator(){
 var numl=0;
 var num2=0;
 var result=0;
  num1 = document.getElementById("no1").value;
 num2 = document.getElementById("no2").value;
 num1 = parseInt(document.getElementById("no2").value);
  num1 = parseInt(document.getElementById("no2").value); 

 switch(op) {
    case 1:
        result = num1 + num2;
        break;
    case 2:             
        result = num1 - num2;
        break;
    case 3:
        result = num1 * num2;
        break;
    case 4:
        result = num1 / num2;
        break;





 document.getElementById("result").innerHTML = result;

 default:
 }

 }
 </script>
 </head>
 <body>
    <h3>*- - - Simple Calculator - --*</h3>
<textarea id = "no1"> </textarea>
<textarea id = "no2"> </textarea>
 <button id="add" onclick="simple_calculator(1);">Add</button>
<button id="sub" onclick="simple_calculator(2);"> Subsract</button>
 <button id="mul" onclick="simple_calculator(3);">Multiply</button>
 <button id="div" onclick="simple_calculator(4);">Divide</button>

<p id="result"></p>

 </body>
 </html>

【问题讨论】：

标签： javascript html switch-statement

【解决方案1】：

您需要将 onclick 处理函数调用中的值传递给函数 simple_calculator 函数，所以试试这个：

function simple_calculator(op) { // op should be an argument

}

【讨论】：

【解决方案2】：

您的simple_calculator 应该返回一个函数，因为您在分配为事件处理程序时立即调用它：

function simple_calculator(op){
  return function wrap() {
    var numl=0;
    var num2=0;
    var result=0;
    num1 = document.getElementById("no1").value;
    num2 = document.getElementById("no2").value;
    num1 = parseInt(document.getElementById("no2").value);
    num1 = parseInt(document.getElementById("no2").value);

    switch(op) {
      case 1:
        result = num1 + num2;
        break;
      case 2:
        result = num1 - num2;
        break;
      case 3:
        result = num1 * num2;
        break;
      case 4:
        result = num1 / num2;
        break;
      default:
    }
    document.getElementById("result").innerHTML = result;
  }
}

【讨论】：

【解决方案3】：

你需要使用onclick="simple_calculator(this.id)"这里是元素的id，你使用id来切换

function simple_calculator(id) {
 
  var num1 = 0;
  var num2 = 0;
  var result = 0;

  num1 = parseInt(no1.value) || 0;
  num2 = parseInt(no2.value) || 0;
  
 
    switch (id) {
      case "add":
        result = num1 + num2;
        break;
      case "sub":
        result = num1 - num2;
        break;
      case "mul":
        result = num1 * num2;
        break;
      case "div":
        result = num1 / num2;
        break;
    }
    document.getElementById("result").innerHTML = result;
  }

<h3>*- - - Simple Calculator - --*</h3>
<textarea id = "no1" > </textarea>
<textarea id = "no2"> </textarea>
 <button id="add" onclick="simple_calculator(this.id)">Add</button>
 <button id="sub" onclick="simple_calculator(this.id)">Subsract</button>
 <button id="mul" onclick="simple_calculator(this.id)">Multiply</button>
 <button id="div" onclick="simple_calculator(this.id)">Divide</button>

<p id="result"></p>

【讨论】：

非常感谢！这成功了。但是有没有办法添加按钮的 id 而不是“this.id”？
@C.Absheka this.id 是按钮的id。或者，您可以使用：<button id="add" onclick="simple_calculator('add')">Add</button> 如果这对您有帮助，请接受我的回答。
这正是我想要的，非常感谢！我还有 1 个问题。这样使用有错吗？ num1 = document.getElementById("no1").value; num2 = document.getElementById("no2").value; num1 = parseInt(document.getElementById("no2").value); num1 = parseInt(document.getElementById("no2").value);
您必须使用 parseInt（或 parseFloat 或 Number），因为 textarea 的输出是字符串而不是数字。如果您愿意，可以使用更详细的num1 = document.getElementById("no1").value。但是请记住，当文本区域内没有值时，用户可以单击按钮，或者他们可能会写入字符串。在这种情况下，您将得到NaN 结果。所以我要说的是：如果你得到一个数字，就使用那个数字。如果你没有得到数字，就让它为 0 (. . . . || 0)