<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/>1) Debe pasar un operador en función de operador a opeartor de JS como:
<input type="button" onclick="operator('*')" value="Multiply">2) Su secuencia de comandos se ejecutará una vez, por lo que es mejor crear una función y llamarla al hacer clic en el botón.
3) Debe tener value para 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>Tu expresión dentro de Switch está mal
switch(number1,number2)Según los documentos de las escuelas W3
Así es como deberían verse sus sentencias de cambio
switch(expression) { case x: // code block break; case y: // code block break; default: // code block }Y así es como funciona:
La expresión de cambio se evalúa una vez.
El valor de la expresión se compara con los valores de cada caso.
Si hay una coincidencia, se ejecuta el bloque de código asociado.
Si no hay ninguna coincidencia, se ejecuta el bloque de código predeterminado.
Supongo que quieres obtener el valor del operador,
En lugar de usar
switch(number1,number2)debe obtener una referencia para su operador
p.ej
const operator= document.getElementById("operator");y luego haga su cambio sobre su operador
switch(operator)Debe pasar una expresión en Switch . Una expresión es lo que se compara con cada cláusula de caso. En su caso, la expresión es un carácter que determina el operador ('+', '-', '/', '*'). Además, no hay una función llamada operator en su secuencia de comandos. Creo que así es como debería funcionar:
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>