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