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
            alert("Invalid operator entered.");
        }

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

Output:

Simple calculator in JavaScript using if else

Here’s how this calculator works:

It prompts the user to enter two numbers and an operator.
It uses if-else statements to determine which mathematical operation to perform based on the operator entered by the user.
If an invalid operator is entered, the calculator shows an error message.
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
calculator.addEventListener('submit', function(event) {
  // 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

Simple calculator in JavaScript using if else

Simple calculator in JavaScript using if else example

Related