Mastering JavaScript: Understanding the Power of If-Else Statements -

JavaScript is a powerful programming language used to create dynamic and interactive web pages. One of the most important concepts in JavaScript is the “if else” statement, which allows developers to create conditional logic in their code.

The “if else” statement evaluates a condition and performs an action based on whether the condition is true or false. For example, let’s say we want to display a message on a webpage only if the user is logged in. We can use the “if else” statement to achieve this:

if (userLoggedIn) {
  document.getElementById("welcomeMessage").innerHTML = "Welcome back!";
} else {
  document.getElementById("welcomeMessage").innerHTML = "Please log in to continue.";
}

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome</title>
  </head>
  <body>
    <div id="welcomeMessage"></div>
    <script>
      // Check if user is logged in
      var userLoggedIn = true;

      if (userLoggedIn) {
        // If user is logged in, display welcome message
        document.getElementById("welcomeMessage").innerHTML = "Welcome back!";
      } else {
        // If user is not logged in, display message prompting them to log in
        document.getElementById("welcomeMessage").innerHTML = "Please log in to continue.";
      }
    </script>
  </body>
</html>

Test your code here

In this example, we have a basic HTML page with a <div> element that has an id of “welcomeMessage”. In the JavaScript code, we first declare a variable called userLoggedIn and set its value to true.
Next, we use an “if else” statement to check the value of userLoggedIn. If it’s true, we set the innerHTML of the “welcomeMessage” element to “Welcome back!”. If it’s false, we set the innerHTML to “Please log in to continue.”.
When you open this HTML file in a web browser, you should see the appropriate message displayed on the page based on the value of userLoggedIn.

The “if else” statement can also be nested within other “if else” statements to create more complex logic. For example:

if (age >= 18) {
  if (hasValidID) {
    document.getElementById("accessGranted").innerHTML = "You may enter.";
  } else {
    document.getElementById("accessGranted").innerHTML = "You need a valid ID to enter.";
  }
} else {
  document.getElementById("accessGranted").innerHTML = "You must be 18 or older to enter.";
}

<!DOCTYPE html>
<html>
  <head>
    <title>Access Control</title>
  </head>
  <body>
    <label for="ageInput">Enter your age:</label>
    <input type="number" id="ageInput"><br><br>
    <label for="idInput">Do you have a valid ID?</label>
    <input type="checkbox" id="idInput"><br><br>
    <button onclick="checkAccess()">Check Access</button><br><br>
    <div id="accessGranted"></div>
    <script>
      function checkAccess() {
        // Get user's age and ID status from input fields
        var age = document.getElementById("ageInput").value;
        var hasValidID = document.getElementById("idInput").checked;

        if (age >= 18) {
          if (hasValidID) {
            // If user is over 18 and has a valid ID, grant access
            document.getElementById("accessGranted").innerHTML = "You may enter.";
          } else {
            // If user is over 18 but doesn't have a valid ID, deny access
            document.getElementById("accessGranted").innerHTML = "You need a valid ID to enter.";
          }
        } else {
          // If user is under 18, deny access
          document.getElementById("accessGranted").innerHTML = "You must be 18 or older to enter.";
        }
      }
    </script>
  </body>
</html>

OUTPUT:

Access ControlEnter your age:

Do you have a valid ID?

In this example, we’re evaluating two conditions: whether the user is over 18 and whether they have a valid ID. Depending on the results of these conditions, we display a message either granting or denying access.

In conclusion, the “if else” statement is a fundamental concept in JavaScript that allows developers to create powerful and dynamic web applications. By understanding how to use “if else” statements, you can create complex logic and interactive user experiences on your website.

Test your code here

BLOG

FREE TOOLS

Kostas