Currently, I am developing a demonstration movie application where I have implemented onclick events using a function to retrieve movie-related data. However, I am encountering an issue when clicking on the specific links I need to work with, as it returns an undefined function. Below is the code snippet:
function getMovieList(key,value) { console.log(key,value)}
function getLanguages() {
const languagesList = document.querySelector("[languages]");
const languagesArray = [
["en-US", "english"],
["it", "italian"],
["de", "german"],
["hi", "indian"],
];
const languagesMap = new Map();
languagesArray.forEach( languages => {
const [idLanguage,language] = languages;
languagesMap.set(idLanguage,language);
languagesList.innerHTML += `
<li class="capitalize" onclick="getMovieList(with_original_langauge=${idLanguage}, ${language})">
<a href="index.html" language-id="${idLanguage}">${language}</a>
</li>`;
} );
}
getLanguages()
Upon inspecting my links, I can see that the arguments are correctly assigned. However, when clicking on them, I receive an error stating that my function is undefined and thus unable to retrieve the values. Could you please help me understand why this is happening?
I also attempted to use window.onload to ensure the function is loaded prior to interacting with it, but unfortunately, it did not resolve the issue.