Skip to content

Simple calculator in JavaScript using if else

  • by

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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *