if(){} else {}语句如何执行两个结果

时间:2019-08-13 11:58:43

标签: javascript

我想创建一个基本的搜索引擎,以名字和姓氏搜索对象数组中已经存在的学生,如果找到以这种方式命名的学生,则在页面上进行录入,如果没有写该页面不存在。但是当我有2个名字相同的人时,它同时给了我if语句的结果。有人可以帮忙吗

    searchButton.addEventListener("click", function () {
    userSearch = searchInput.value;
    for (i = 0; i < allStudents.length; i++) {
      student = allStudents[i];
      if(userSearch.toLowerCase() === student.firstName.toLowerCase() ||
      userSearch.toLowerCase() === student.lastName.toLowerCase() ||
      userSearch.toLowerCase() === student.firstName.toLowerCase() + " " + student.lastName.toLowerCase() ||
      userSearch.toLowerCase() === student.lastName.toLowerCase() + " " + student.firstName.toLowerCase()) {
        outputDiv.innerHTML +=  "<h2> Student: " + student.firstName + " " + student.lastName + "</h2><br>" +
                                  "Age: " + student.age + "<br>" +
                                  "Eye Color: " + student.eyeColor + "<br>" +
                                  "Hair Color: " + student.hairColor + "<br>" +
                                  "Programming Skills: " + student.programmingSkills
      searchInput.value = "";

      } else {
      searchInput.value = "";
      outputDiv.innerHTML += "<h2>The student you searched for is not in out database</h2>"
      }
    }
});

2 个答案:

答案 0 :(得分:0)

您可能要更改逻辑,因为有两项任务:

  • 查找student是否存在
  • 显示student(如果可用),否则显示消息

您可以使用变量(found来跟踪是否在student中找到了任何allStudents,这样您就不必担心{{1 }}条件执行一次以上

else
let allStudents = [{
  firstName: "George",
  lastName: "A"
}, {
  firstName: "George",
  lastName: "B"
}]

searchButton.addEventListener("click", function() {
  outputDiv.innerHTML = "";
  userSearch = searchInput.value;
  var found = false;
  for (i = 0; i < allStudents.length; i++) {
    student = allStudents[i];
    if (userSearch.toLowerCase() === student.firstName.toLowerCase() ||
      userSearch.toLowerCase() === student.lastName.toLowerCase() ||
      userSearch.toLowerCase() === student.firstName.toLowerCase() + " " + student.lastName.toLowerCase() ||
      userSearch.toLowerCase() === student.lastName.toLowerCase() + " " + student.firstName.toLowerCase()) {
      outputDiv.innerHTML += "<h2> Student: " + student.firstName + " " + student.lastName + "</h2><br>" +
        "Age: " + student.age + "<br>" +
        "Eye Color: " + student.eyeColor + "<br>" +
        "Hair Color: " + student.hairColor + "<br>" +
        "Programming Skills: " + student.programmingSkills
      found = true;
    }
  }
  if (!found)
    outputDiv.innerHTML = "<h2>The student you searched for is not in out database</h2>";

  searchInput.value = "";
});

答案 1 :(得分:0)

您需要重新排列检查以查看是否找到它。您正在学生循环中输出“在我们的数据库中未找到该学生”,因此即使找到了另一个结果(在循环中),它也会输出该文本。我已通过将检查(如果找到了学生)移出循环并使用变量来跟踪该问题,从而纠正了该问题。我还做了一些更改,以便您不必在每个循环中都将名称重新格式化为LowerCase()或不必定位DOM元素。

searchInput = document.getElementById("search_text"),
searchButton = document.getElementById("SearchButton"),
outputDiv = document.getElementById("outputdiv");
searchButton.addEventListener("click", function () {
   var userFound = false;
   userSearch = searchInput.value;
   studentLen = allStudents.length;
   outputDiv.innerHTML = "";
   for (i = 0; i < studentLen; i++) {
     student = allStudents[i];
     userSearch = userSearch.toLowerCase();
     var fn = student.firstName.toLowerCase(),
     ln = student.lastName.toLowerCase();

     if(userSearch === fn || userSearch === ln || userSearch === fn + " " + ln || userSearch === ln + " " + fn) {
       outputDiv.innerHTML +=  "<h2> Student: " + student.firstName + " " + student.lastName + "</h2><br>" +
                                 "Age: " + student.age + "<br>" +
                                 "Eye Color: " + student.eyeColor + "<br>" +
                                 "Hair Color: " + student.hairColor + "<br>" +
                                 "Programming Skills: " + student.programmingSkills
       searchInput.value = "";
       userFound = true;
     }
   }
   if(!userFound){
     outputDiv.innerHTML += "<h2>The student you searched for is not in out database</h2>";
   }
});

使用HTML / JS进行小提琴演奏都包括: https://jsfiddle.net/Ltkacgn4/