`;,javascript,html"/>

首页 > 解决方案 > Covid 19 跟踪器空代码。country_list_element.innerHTML += `

`;

问题描述

令人尴尬的是,我承认我是编程初学者,并且我正在为我的网站项目复制 youtube 教程中的代码,由于某些奇怪的原因,代码似乎为空,而搜索框上的国家/地区列表没有显示...我对如何配置它并几乎没有任何线索,我需要帮助:(

function createCountryList(){
    const num_countries = country_list.length;

    let i = 0, ul_list_id;

    country_list.forEach( (country, index) => {
        if( index % Math.ceil(num_countries/num_of_ul_lists) == 0){
            ul_list_id = `list-${i}`;
            country_list_element.innerHTML += `<ul id='${ul_list_id}'></ul>`;
            i++;
        }

        document.getElementById(`${ul_list_id}`).innerHTML += `
            <li onclick="fetchData('${country.name}')" id="${country.name}">
            ${country.name}
            </li>
        `;
    })
}

let num_of_ul_lists = 3;
createCountryList();

// SHOW/HIDE THE COUTRY LIST ON CLICK EVENT
chang_country_btn.addEventListener("click", function(){
    input.value = "";
    resetCountryList();
    search_country_element.classList.toggle("hide");
    search_country_element.classList.add("fadeIn");
});

close_list_btn.addEventListener("click", function(){
    search_country_element.classList.toggle("hide");
});

country_list_element.addEventListener("click", function(){
    search_country_element.classList.toggle("hide");
});

// COUNTRY FILTER
/*input event fires up whenever the value of the input changes */
input.addEventListener("input", function(){
    let value = input.value.toUpperCasse();
    
    country_list.forEach( country => {
        if( country.name.toUpperCase().startsWith(value)){
            document.getElementById(country.name).classList.remove("hide");
        }else{
            document.getElementById(country.name).classList.add("hide");
        }
    })
})

// RESET COUNTRY LIST (SHOW ALL THE COUNTRIES )
function resetCountryList(){
    country_list.forEach( country => {
        document.getElementById(country.name).classList.remove("hide");
    })
}```

标签: javascripthtml

解决方案


推荐阅读