在javascript（开关）中发现无效的运算符我该如何解决这个代码

Posted 2023-02-22

【中文标题】在javascript（开关）中发现无效的运算符我该如何解决这个代码

【英文标题】：Invalid operator found in javascript (switch) how can i solve this code

【发布时间】：2022-01-16 07:31:22

【问题描述】：

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

【问题讨论】：

“number1”或“number2”如何成为这些运算符字符串之一？另外switch() 表达式与switch (number2) 完全相同；我不确定你打算这样做，但这不是switch 的工作方式。

我想使用 html 为算术运算 ( + - * / ) 编写代码，并且用户输入两个数字并按下其中一个按钮以使用 (switch) 显示结果

此外，该脚本在页面加载时执行，而不是在单击其中一个按钮时执行。他们试图调用未在任何地方定义的operator() 函数。

【参考方案1】：

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

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>

【讨论】：

"你需要在 Switch 中传递一个表达式" - OP 确实在switch 语句中放入了一个表达式

我的意思是根据这个特定的用例来表达，它是运算符符号。我现在添加了相同的。感谢您指出。

【参考方案2】：

1)你应该在opeartor函数中通过JS传递一个操作符：

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

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

3) 你需要有value 对应mathematical opeartion

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;

  

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

【参考方案3】：

你在 Switch 里面的表达是错误的

switch(number1,number2)

根据W3 schools docs

这就是你的 switch 语句的样子

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

这就是它的工作原理：

switch 表达式被计算一次。

将表达式的值与每个案例的值进行比较。

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

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

我猜你想获取运算符的值，

而不是使用

switch(number1,number2)

你应该得到你的运营商的参考

例如

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

然后切换运营商

switch(operator)