Por vergonzoso que sea admitir que soy un principiante en programación y que estaba copiando un código en un tutorial de YouTube para mi proyecto de sitio web, por alguna extraña razón, el código parece ser nulo y la lista de países en el cuadro de búsqueda no lo hace. show... no tengo la menor idea de como configurarlo y ya casi vence, necesito ayuda por favor :(

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