Invalid operator found in javascript (switch) how can i solve this code

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

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>

Answer 2

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

eg

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

and then make your switch over your operator

switch(operator)

Answer 3

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>