未输入国家/地区时的 Covid-19 错误消息与 API 不匹配

Question

我正在开发一个 COVID-19 跟踪器应用程序，目前它可以运行，但我遇到了问题，因为当用户搜索不在 API 中的国家/地区时，错误消息应该是弹出 else 语句，这确实发生了。问题是，当输入的国家/地区和 API 具有信息时，该消息会弹出，但错误消息仍会弹出。任何建议都会有所帮助，谢谢。

let btn = document.getElementById("submit-btn");
//set variable btn to the html button id
        
        btn.addEventListener("click",()=>{
        let text = document.getElementById("input-text").value;
        console.log("button was pressed");
        //added a event once btn is pressed taking the value of what was typed in the form

            fetch('https://api.covid19api.com/summary')
            .then((covidData)=>{
                return covidData.json();
            })
            //
            .then((getData)=>{
                console.log(getData);
                console.log("api was contacted");
                var content = document.querySelector(".api-data"); 

                var box = content.lastElementChild;  
                while (box) { 
                    content.removeChild(box); 
                    box = content.lastElementChild; 
                } 

                var countriesIndex = 0;
                for(var i = 0; i < 185; i++){
                    if(getData.Countries[i].Country.toLowerCase() == text.toLowerCase()){
                        countriesIndex = i;
                        break;
                    }
                    else {
                        var hideData = document.querySelector(".api-data");
                        hideData.style.display = "none";
                        alert("No information for that country")
                        break;
                    }
                }
                let data = document.querySelector(".api-data");
                data.innerHTML = `<div class="data-boxes">
                                <div class="country-index">
                                    <span>Covid-19 Cases in ${getData.Countries[countriesIndex].Country}</span>
                                </div>
                                <div class="total-data">
                                    <div><p>Total Confirmed</p> ${getData.Countries[countriesIndex].TotalConfirmed}</div>
                                    <div><p>Total Deaths</p> ${getData.Countries[countriesIndex].TotalDeaths}</div>
                                    <div><p>Total Recovered</p> ${getData.Countries[countriesIndex].TotalRecovered}</div>
                                </div>
                                <div class="new-data">
                                    <div><p>New Confirmed</p> ${getData.Countries[countriesIndex].NewConfirmed}</div>
                                    <div><p>New Deaths</p> ${getData.Countries[countriesIndex].NewDeaths}</div>
                                    <div><p>New Recovered</p> ${getData.Countries[countriesIndex].NewRecovered}</div>
                                    </div>
                                </div>`;
            })
        })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container tracker-container">
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
              <h1 class="covid-header">Covid-19 Daily Tracker</h1>
              <p class="covid-description">A daily tracker of the Covid-19 virus, enter the country in the search bar to recieve the report.</p>
              <p class="covid-description">Report is given from the "covid19api" API.</p>
            </div>
          </div>
          <div class="info-box">
          <form>
            <div class="form-row input-row">
              <div class="col-12 form">
                <label for="country-input">Enter country's name</label>
                <input type="text" class="form-control" id="input-text" value="" required>
                <button type="button" class="btn btn-success btn-block" id="submit-btn">Get Statistics</button>
              </div>
            </div>
          </form>
          <div class="api-data">
          </div>
        </div>
        </div>
        
</body>
<script src="tracker.js"></script>
</html>

Answer 1

else部分被替换。如果 countriesIndex 未从 0 更新，则表示未找到数据。

固定代码：

let btn = document.getElementById("submit-btn");
//set variable btn to the html button id
        
        btn.addEventListener("click",()=>{
        let text = document.getElementById("input-text").value;
        console.log("button was pressed");
        //added a event once btn is pressed taking the value of what was typed in the form

            fetch('https://api.covid19api.com/summary')
            .then((covidData)=>{
                return covidData.json();
            })
            //
            .then((getData)=>{
                console.log(getData);
                console.log("api was contacted");
                var content = document.querySelector(".api-data"); 

                var box = content.lastElementChild;  
                while (box) { 
                    content.removeChild(box); 
                    box = content.lastElementChild; 
                } 

                var countriesIndex = 0;
                for(var i = 0; i < 185; i++){
                    if( getData.Countries[i].Country.toLowerCase() == text.toLowerCase()){
                        countriesIndex = i;
                        break;
                    }
                    
                }
                if(countriesIndex==0) {
                        var hideData = document.querySelector(".api-data");
                        hideData.style.display = "none";
                        alert("No information for that country")
                    }
                else{
                let data = document.querySelector(".api-data");
                data.innerHTML = `<div class="data-boxes">
                                <div class="country-index">
                                    <span>Covid-19 Cases in ${getData.Countries[countriesIndex].Country}</span>
                                </div>
                                <div class="total-data">
                                    <div><p>Total Confirmed</p> ${getData.Countries[countriesIndex].TotalConfirmed}</div>
                                    <div><p>Total Deaths</p> ${getData.Countries[countriesIndex].TotalDeaths}</div>
                                    <div><p>Total Recovered</p> ${getData.Countries[countriesIndex].TotalRecovered}</div>
                                </div>
                                <div class="new-data">
                                    <div><p>New Confirmed</p> ${getData.Countries[countriesIndex].NewConfirmed}</div>
                                    <div><p>New Deaths</p> ${getData.Countries[countriesIndex].NewDeaths}</div>
                                    <div><p>New Recovered</p> ${getData.Countries[countriesIndex].NewRecovered}</div>
                                    </div>
                                </div>`;
                                }
            })
        })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container tracker-container">
        <div class="jumbotron jumbotron-fluid">
            <div class="container">
              <h1 class="covid-header">Covid-19 Daily Tracker</h1>
              <p class="covid-description">A daily tracker of the Covid-19 virus, enter the country in the search bar to recieve the report.</p>
              <p class="covid-description">Report is given from the "covid19api" API.</p>
            </div>
          </div>
          <div class="info-box">
          <form>
            <div class="form-row input-row">
              <div class="col-12 form">
                <label for="country-input">Enter country's name</label>
                <input type="text" class="form-control" id="input-text" value="" required>
                <button type="button" class="btn btn-success btn-block" id="submit-btn">Get Statistics</button>
              </div>
            </div>
          </form>
          <div class="api-data">
          </div>
        </div>
        </div>
        
</body>
<script src="tracker.js"></script>
</html>

未输入国家/地区时的 Covid-19 错误消息与 API 不匹配

Covid-19 error message when country isn't entered isn't matched with API

javascript

api

fetch

selectors-api