Javascript with API: How to make selection list?-CodePudding

HTML file I am trying to create a feature on my webpage that lets you choose a country and then you will receive the information regarding the country. I have followed my instructors tutorial exactly, but it won't work for me. What am I doing wrong?

My Code:

//variables const countryListUrl: "https://api.gbif.org/v1/enumeration/country";

const countryList = document.getElementById("country-list");

//when the page loads

window.addEventListener("load",);

//retrieve the list of countries from API

function getCountryList(){

return fetch(countryListUrl).then(Response => Response.json());

}

//add countries to dropdown list

function updateCounryList(){

getCountryList().then(function(data){

     //get country names

    for(var element in data.message){

    //add to dropdown list 

    let option = createOption(element);

    countryList.appendChild(option)   

    }     

    }    
)

} function createOption(text){

 let option = document.createElement("option");

 option.textContent = text;

 return option;

}

CodePudding user response：

Inside appendChild paranthesis add this

row.cloneNode(true)

and check you are adding script at the bottom of html not at the starting

Also if this doesn't works send screenshot of console.

CodePudding user response：

you are getting error in line number 24 you are getting null check this line const countryList = document.getElementById("country-list"); check the id it might not be correct that's why you are not able to select the element may be there is a typo check this.