<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) 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>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>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:
The switch expression is evaluated once.
The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
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)