Simple calculator in JavaScript using if else

In this JavaScript tutorial, you’ll learn how to create a simple calculator using if-else statements. You’ll start by defining variables for the two numbers you want to perform calculations on, and then create a set of conditional statements to determine which math operation to perform based on user input.

``````// ask user for input
var num1 = parseInt(prompt("Enter first number:"));
var num2 = parseInt(prompt("Enter second number:"));

// ask user for operation to perform
var operation = prompt("Enter operation (+, -, *, /):");

// perform calculation based on operation
if(operation === "+") {
console.log(num1 + num2);
} else if(operation === "-") {
console.log(num1 - num2);
} else if(operation === "*") {
console.log(num1 * num2);
} else if(operation === "/") {
console.log(num1 / num2);
} else {
console.log("Invalid operation.");
}
``````

Simple calculator in JavaScript using if else example

Simple example code.

``````<!DOCTYPE html>
<html>
<body>
<script>
// Get input values from the user
let num1 = Number(prompt("Enter the first number:"));
let num2 = Number(prompt("Enter the second number:"));
let operator = prompt("Enter the operator (+, -, *, /):");

// Calculate the result based on the operator entered
let result;
if (operator === "+") {
result = num1 + num2;
} else if (operator === "-") {
result = num1 - num2;
} else if (operator === "*") {
result = num1 * num2;
} else if (operator === "/") {
result = num1 / num2;
} else {
// If an invalid operator is entered, show an error message
}

// Display the result to the user
if (result !== undefined) {
alert(`The result of \${num1} \${operator} \${num2} is \${result}`);
}
</script>
</body>
</html>
``````

Output:

Here’s how this calculator works:

1. It prompts the user to enter two numbers and an operator.
2. It uses if-else statements to determine which mathematical operation to perform based on the operator entered by the user.
3. If an invalid operator is entered, the calculator shows an error message.
4. If a valid operator is entered, the calculator calculates the result and displays it to the user using an alert message.

You can use an event listener

``````// Get the calculator form and input elements
const calculator = document.querySelector('#calculator');
const num1Input = document.querySelector('#num1');
const num2Input = document.querySelector('#num2');
const operatorInput = document.querySelector('#operator');
const resultDisplay = document.querySelector('#result');

// Add a submit event listener to the calculator form
// Prevent the form from submitting and refreshing the page
event.preventDefault();

// Get the values of the input elements
const num1 = Number(num1Input.value);
const num2 = Number(num2Input.value);
const operator = operatorInput.value;

// Calculate the result based on the operator entered
let result;
if (operator === '+') {
result = num1 + num2;
} else if (operator === '-') {
result = num1 - num2;
} else if (operator === '*') {
result = num1 * num2;
} else if (operator === '/') {
result = num1 / num2;
} else {
// If an invalid operator is entered, show an error message
resultDisplay.textContent = 'Invalid operator entered';
return;
}

// Display the result to the user
resultDisplay.textContent = `The result of \${num1} \${operator} \${num2} is \${result}`;
});
``````

Comment if you have any doubts or suggestions on this JS HTML code.

Note: The All JS Examples codes are tested on the Firefox browser and the Chrome browser.

OS: Windows 10

Code: HTML 5 Version