javascript（开关）中发现无效运算符如何解决此代码

Question

    <form action="">
        <h2>Inter A Numbers</h2>
        <label for="">Number One</label>
        <input type="text" id="num1">
        <br>
        <br>
        <label for="">Number Tow</label>
        <input type="text" id="num2">
        <br>
        <br>
        <input type="button" onclick="operator()" value="Multiply">
        <input type="button" onclick="operator()" value="Divide">
        <input type="button" onclick="operator()" value="Addition">
        <input type="button" onclick="operator()" value="Subtraction">
        <input type="button" onclick="operator()" value="Clear">
    </form>
    <p>The Result Is: <br>
        <span id="result"> </span>
    </p>


<script>

    let result;
    const number1 = document.getElementById("num1");
    const number2 = document.getElementById("num2");
    switch(number1,number2) {
    case '+':
        result = number1 + number2;
        document.write(`${number1} + ${number2} = ${result}`);
        break;
    
    case '-':
         result = number1 - number2;
         document.write(`${number1} - ${number2} = ${result}`);
        break;
    
    case '*':
         result = number1 * number2;
         document.write(`${number1} * ${number2} = ${result}`);
        break;
    
    case '/':
         result = number1 / number2;
         document.write(`${number1} / ${number2} = ${result}`);
        break;
    
    default:
        document.write('Invalid operator found');
        break;

}
<script/>

Answer 1

您需要在Switch中传递表达式。表达式是与每个case子句相匹配的内容。在您的情况下，表达式是确定运算符的字符 (' ', '-', '/', '*').此外，脚本中没有名为操作符的函数。我认为它应该是这样运作的：

function operator(operation) {
  let result;
  const number1 = Number(document.getElementById("num1").value);
  const number2 = Number(document.getElementById("num2").value);

  if (!operation) {
    document.getElementById("result").innerHTML = "";
    document.getElementById("num1").value = "";
    document.getElementById("num2").value = "";
  } else if (isNaN(number1) || isNaN(number2))
    document.getElementById("result").innerHTML = "Invalid operation found";
  else {
    switch (operation) {
      case '+':
        result = number1 + number2;
        document.getElementById("result").innerHTML = (`${number1} + ${number2} = ${result}`);
        break;

      case '-':
        result = number1 - number2;
        document.getElementById("result").innerHTML = (`${number1} - ${number2} = ${result}`);
        break;

      case '*':
        result = number1 * number2;
        document.getElementById("result").innerHTML = (`${number1} * ${number2} = ${result}`);
        break;

      case '/':
        result = number1 / number2;
        document.getElementById("result").innerHTML = (`${number1} / ${number2} = ${result}`);
        break;
    }
  }
}

<form action="">
  <h2>Inter A Numbers</h2>
  <label for="">Number One</label>
  <input type="text" id="num1">
  <br>
  <br>
  <label for="">Number Tow</label>
  <input type="text" id="num2">
  <br>
  <br>
  <input type="button" onclick="operator('*')" value="Multiply">
  <input type="button" onclick="operator('/')" value="Divide">
  <input type="button" onclick="operator('+')" value="Addition">
  <input type="button" onclick="operator('-')" value="Subtraction">
  <input type="button" onclick="operator()" value="Clear">
</form>
<p>The Result Is: <br>
  <span id="result"> </span>
</p>

Answer 2

你在开关里的表情是错误的

switch(number1,number2)

根据W3学校的文件

这就是你的开关语句应该是什么样子

switch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
}

这就是它的工作原理：

>

开关表达式计算一次。

表达式的值与每个大小写的值进行比较。

如果存在匹配项，则执行关联的代码块。

如果没有匹配，则执行默认代码块。

我猜你想得到操作符的值，

而不是用

switch(number1,number2)

你应该为你的接线员找到一份推荐信

例如。

    const operator= document.getElementById("operator");

然后把你的开关换成你的操作员

switch(operator)

Answer 3

1） 您应该通过JS在opeartor函数中传递运算符，如下所示：

<input type="button" onclick="operator('*')" value="Multiply">

2） 您的脚本将运行一次，因此最好创建一个函数并在单击按钮时调用它。

3） 对于数学运算

const number1 = +document.getElementById( "num1" ).value;
const number2 = +document.getElementById( "num2" ).value;

const display = document.getElementById("result");

function operator(op) {
  let result;
  const number1 = +document.getElementById("num1").value;
  const number2 = +document.getElementById("num2").value;
  switch (op) {
    case '+':
      result = number1 + number2;
      display.textContent = `${number1} + ${number2} = ${result}`;
      break;

    case '-':
      result = number1 - number2;
      display.textContent = `${number1} - ${number2} = ${result}`;
      break;

    case '*':
      result = number1 * number2;
      display.textContent = `${number1} * ${number2} = ${result}`;
      break;

    case '/':
      result = number1 / number2;
      display.textContent = `${number1} / ${number2} = ${result}`;
      break;

    case 'clear':
      display.textContent = "";
      break;

    default:
      display.textContent = 'Invalid operator found';
      break;

  }
}

html lang-html prettyprint-override"><form action="">
  <h2>Inter A Numbers</h2>
  <label for="">Number One</label>
  <input type="text" id="num1">
  <br>
  <br>
  <label for="">Number Tow</label>
  <input type="text" id="num2">
  <br>
  <br>
  <input type="button" onclick="operator('*')" value="Multiply">
  <input type="button" onclick="operator('/')" value="Divide">
  <input type="button" onclick="operator('+')" value="Addition">
  <input type="button" onclick="operator('-')" value="Subtraction">
  <input type="button" onclick="operator('clear')" value="Clear">
</form>
<p>The Result Is: <br>
  <span id="result"> </span>
</p>