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

CodePudding user response：

1) You should pass an operator in opeartor function throgh JS as:

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

2) Your script will run once, so better to create a function and call it on button click.

3) You need to have value for 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>

CodePudding user response：

Your expression inside Switch is wrong

switch(number1,number2)

As per W3 schools docs

This is how your switch statements should look like

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

And this is how it works:

1. The switch expression is evaluated once.

2. The value of the expression is compared with the values of each case.

3. If there is a match, the associated block of code is executed.

4. If there is no match, the default code block is executed.

I guess you want to get the value of the operator,

instead of using

switch(number1,number2)

you should get a reference for your operator

e.g.

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

and then make your switch over your operator

switch(operator)

CodePudding user response：

You need to pass an expression in Switch. An expression is what is matched against each case clause. In your case, the expression is a character determining the operator (' ', '-', '/', '*'). Also, there is no function called operator in your script. I think this is how it should work:

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>