Question

当我在数组中输入 France 或 france（一个国家/地区）时，代码块将返回 country not in our database。我希望代码返回 France is a country located in Europe。

我尝试在每个条件语句上使用 return 关键字，但没有成功。我也读过w3schools.com's documentation on if/else statement。

但是，我仍然无法解决该问题。有趣的是，else if 语句有效。我的意思是当我将输入字段留空然后单击按钮时，代码确实返回 field cannot be left blank。我知道我的问题可能听起来很基本，但我仍然是初学者。

const btn = document.getElementById("button");

btn.addEventListener("click", function(){
  fetch("https://restcountries.eu/rest/v2/all")
  .then(function(response){
    return response.json()
  })
  .then(function(data){
    var userInput = document.getElementById("userInput");
    var userInputValue = userInput.value;
    var region = document.getElementById("region");
    for(var i = 0; i < data.length; i++) {
      if(userInputValue.toLowerCase() === data[i].name.toLowerCase()) {
        region.innerHTML = `${data[i].name} is a country located in ${data[i].region}`
      } else if (userInputValue === "") {
        region.innerHTML = "field cannot be left blank";
      } else {
        region.innerHTML = "country not in our database";
      }
    }
  })
})

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>API Beginners</title>
  </head>
  <body>
    <label for="userInput">country's name</label>
    <input id="userInput" type="text" name="" value="" placeholder="enter a country"><br>
    <label for="button">clik here to submit</label>
    <button id="button" type="click" name="button">click me</button>
    <div id="region"></div>

  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

Answer 1

如前所述，您的循环在查找结果时不会中断。此外，值得考虑完全取消循环并使用数组函数“find”：

var existing = data.find(d => d.name.toLowerCase() === userInputValue.toLowerCase());
region.innerHTML = existing 
    ? `${existing.name} is a country located in ${existing.region}`
    : userInputValue === ""
        ? "field cannot be left blank"
        : "country not in our database";

Answer 2

您必须从 break 和 if 语句中的 for 循环中 else if，否则数组中的最后一个数据将指示您的元素包含的内容。

此代码将为您提供预期的输出：

const btn = document.getElementById("button");

btn.addEventListener("click", function(){
  fetch("https://restcountries.eu/rest/v2/all")
  .then(function(response){
    return response.json()
  })
  .then(function(data){
    var userInput = document.getElementById("userInput");
    var userInputValue = userInput.value;
    var region = document.getElementById("region");
    for(var i = 0; i < data.length; i++) {
      if(userInputValue.toLowerCase() === data[i].name.toLowerCase()) {
        region.innerHTML = `${data[i].name} is a country located in ${data[i].region}`
        break;
      } else if (userInputValue === "") {
        region.innerHTML = "field cannot be left blank";
        break;
      } else {
        region.innerHTML = "country not in our database";
      }
    }
  })
})

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>API Beginners</title>
  </head>
  <body>
    <label for="userInput">country's name</label>
    <input id="userInput" type="text" name="" value="" placeholder="enter a country"><br>
    <label for="button">clik here to submit</label>
    <button id="button" type="click" name="button">click me</button>
    <div id="region"></div>

  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

虽然我更喜欢 Neil W's answer 更优雅，但如果你想避免重复无用的条件，你可以去：

const btn = document.getElementById("button");

btn.addEventListener("click", function(){
  fetch("https://restcountries.eu/rest/v2/all")
  .then(function(response){
    return response.json()
  })
  .then(function(data){
    var userInputValue = document.getElementById("userInput").value;
    var region = document.getElementById("region");
    if (userInputValue === "") {
      region.innerHTML = "field cannot be left blank";
      return;
    }
    for(var i = 0; i < data.length; i++) {
      if(userInputValue.toLowerCase() === data[i].name.toLowerCase()) {
        region.innerHTML = `${data[i].name} is a country located in ${data[i].region}`
        return;
      }
    }
    region.innerHTML = "country not in our database";
  })
})

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>API Beginners</title>
  </head>
  <body>
    <label for="userInput">country's name</label>
    <input id="userInput" type="text" name="" value="" placeholder="enter a country"><br>
    <label for="button">clik here to submit</label>
    <button id="button" type="click" name="button">click me</button>
    <div id="region"></div>

  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

这实际上使用了 return，正如您所写的那样，您尝试过。

Answer 3

您的 for 循环正在覆盖每次迭代的结果。为了查看结果，您需要中断 for 循环。像这样：

for (let i = 0; i < data.length; i++) {
    if (userInputValue.toLowerCase() === data[i].name.toLowerCase()) {
        region.innerHTML = `${data[i].name} is a country located in ${data[i].region}`
        break;
    } else if (userInputValue === "") {
        region.innerHTML = "field cannot be left blank";
        break;
    }
    region.innerHTML = "country not in our database";
}

但请注意，country not in our database 部分在每个循环中都会执行，因此该答案的性能不是最佳。

Answer 4

我编辑了您的代码，不要放置所有的 if else condition inside the for loop、checkuserinput === "" place it before beginning of the function which is the for loop。只需查看我的代码，如果您有任何问题，请发表评论。

const btn = document.getElementById("button");

btn.addEventListener("click", function(){
 fetch("https://restcountries.eu/rest/v2/all")
  .then(function(response){
    return response.json()
  })
  .then(function(data){
 
   var check = true;
   
   var userInput = document.getElementById("userInput");
   
   var userInputValue = userInput.value;
   
   var region = document.getElementById("region");
   
   if (userInputValue === "") { // First Check The User Input
        region.innerHTML = "field cannot be left blank";
   } else {
      for(var i = 0; i < data.length; i++) {
      
        if(userInputValue.toLowerCase() == data[i].name.toLowerCase()) {
        region.innerHTML = `${data[i].name} is a country located in ${data[i].region}`;
        check = true;
        break; // Break to not continue since we get what we need
        } else {
          check = false;
        }
      }
        
        if (check == false) {
           region.innerHTML = "country not in our database";
        }
   }
    
   
   
  })
})

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>API Beginners</title>
  </head>
  <body>
    <label for="userInput">country's name</label>
    <input id="userInput" type="text" name="" value="" placeholder="enter a country"><br>
    <label for="button">clik here to submit</label>
    <button id="button" type="click" name="button">click me</button>
    <div id="region"></div>

  </body>
  <script src="index.js" type="text/javascript"></script>
</html>

为什么我的 if、else if 和 else 语句不能正常工作？

4 个答案: