JavaScript for loop with if statement only checks the first variable

Question

I'm trying to create a booking system using HTML and JavaScript. This is a simplified version of my code which should check if the selected time matches any variables from the bookings array.

The loop is working (it works when I replace the if statements with console.log(bookings[i]);).

<html>

<head></head>

<body>
  <input type="time" name="time" id="time">
  <button id="submit" class="button">Submit</button>
  <script>
    var bookings = ["10:00", "10:15", "10:30"];

    function addBooking() {
      for (i = 0; i < bookings.length; i++) {
        if (bookings[i] == document.getElementById("time").value) {
          alert("Time unavailable.");
        } else {
          alert("Booking succesful.");
        }
        break;
      }
    }
    document.getElementById("submit").addEventListener("click", addBooking);
  </script>
</body>

</html>

When the form is submitted, the function only checks the first variable (if I type in 10:00 it alerts that time is unavailable but if I type 10:15 or 10:30 it alerts "Booking successful") when it should alert "Time unavailable" if the input matches any variables from the bookings array. EDIT: removing break does NOT solve the problem.

try moving the break statement to inside if block

P D K Pavan Kumar
– P D K Pavan Kumar

2019-06-02 12:45:08 +00:00
Commented Jun 2, 2019 at 12:45 — P D K Pavan Kumar
– P D K Pavan Kumar, Commented Jun 2, 2019 at 12:45
You're breaking after first iteration itself

Code Maniac
– Code Maniac

2019-06-02 12:45:48 +00:00
Commented Jun 2, 2019 at 12:45 — Code Maniac
– Code Maniac, Commented Jun 2, 2019 at 12:45
break keyword is culprit

Hidayt Rahman
– Hidayt Rahman

2019-06-02 12:51:55 +00:00
Commented Jun 2, 2019 at 12:51 — Hidayt Rahman
– Hidayt Rahman, Commented Jun 2, 2019 at 12:51

Rami Jarrar · Accepted Answer · 2019-06-02 12:45:37Z

2

Because you always break after the first check! so you're only comparing the first value with the input, also you don't have to explicitly loop over the values, in your case you can just do it with an if statement, like this

if (bookings.indexOf(document.getElementById("time").value) === -1) {
    alert("Booking succesful.");
} else {
    alert("Time unavailable.");
}

answered Jun 2, 2019 at 12:45

Rami Jarrar

4,6537 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

T.J. Crowder · Accepted Answer · 2019-06-02 12:46:02Z

The problem is

You're alerting on every loop iteration, and
You're stopping (with break) after the first iteration

Instead, have a flag, and stop only when you've seen that the time is unavailable:

function addBooking() {
    var available = true;
    for (i = 0; available && i < bookings.length; i++) {
        if (bookings[i] == document.getElementById("time").value) {
            avalable = false;
        }
    }
    if (available) {
        alert("Booking succesful.");
    }
    else {
        alert("Time unavailable.");
    }
}

In that example I've added available && to the loop condition. You could choose to use break instead:

function addBooking() {
    var available = true;
    for (i = 0; i < bookings.length; i++) {
        if (bookings[i] == document.getElementById("time").value) {
            available = false;
            break;
        }
    }
    if (available) {
        alert("Booking succesful.");
    }
    else {
        alert("Time unavailable.");
    }
}

You can also use includes to find out if an array includes a value:

function addBooking() {
    if (bookings.includes(document.getElementById("time").value)) {
        alert("Time unavailable.");
    }
    else {
        alert("Booking succesful.");
    }
}

In all of the above, I'd probably get the value from the input into a variable once, and then reuse the variable:

function addBooking() {
    var desiredTime = document.getElementById("time").value;
    if (bookings.includes(desiredTime)) {
        alert("Time unavailable.");
    }
    else {
        alert("Booking succesful.");
    }
}

Collectives™ on Stack Overflow

JavaScript for loop with if statement only checks the first variable

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related