Question

我正在尝试使用HTML和JavaScript创建预订系统。这是我的代码的简化版本，应检查所选时间是否与预订数组中的任何变量匹配。

该循环有效（当我用console.log（bookings [i]）;替换if语句时，该循环有效。）

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

提交表单时，该函数仅检查第一个变量（如果我在10:00中键入它会提示时间不可用，但如果我键入10:15或10:30，则会警告“预订成功”）如果输入匹配预订数组中的任何变量，则应警告“时间不可用”。编辑：删除中断不能解决问题。

Answer 1

因为第一次检查后总是break！因此，您只需要将第一个值与输入进行比较，也不必显式循环这些值，在这种情况下，您可以使用if语句来完成此操作，例如

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

Answer 2

问题是

您要提醒每次循环迭代，并且
您要在第一次迭代后停止（使用break）

相反，有一个标志，只有在看到时间不可用时才停止：

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.");
    }
}

在该示例中，我将available &&添加到了循环条件中。您可以选择改用break：

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.");
    }
}

您还可以使用includes来确定数组是否包含值：

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

在上述所有情况下，我可能会从输入中将value放入变量一次中，然后重用该变量：

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

带for语句的JavaScript for循环仅检查第一个变量

2 个答案: