onclick event returns undefined function

I am building a demo movie app so I decided to assign onclick events with a function that gets me some movie related data.
The problem arises when I click on the target links I want to work on, giving me back an undefined function.
Here's the code:

    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()

When I inspect my links they do have the given arguments but if I click on them, then it says my function is undefined so I cannot get the values back.
Why is that ?

I tried the method window.onload expecting to load the function beforehand and get it as defined,but still it did not work.

The getMovieList() function is called asynchronously, which means that the default behaviour of the <a> link is called before the function is executed.

Use event.preventDefault(); in the event handler, and change the href manually from the function body.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function getMovieList() {
  alert('movie list');
  location.href="index.html";
  }

<!-- language: lang-html -->

<li>
   <a href="index.html" onclick="event.preventDefault();getMovieList()">language</a>
</li>

<!-- end snippet -->

EDIT : My answer have changed since your edit!

There's something that looks at your code but you have to add a real location.href in the function.

Here it makes just an alert with some URL parameters for the demo.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

	let languagesListDiv;
        
    let languagesArray = [
			["en", "english"],
			["it", "italian"],
			["de", "german"],
			["hi", "indian"]
        ];
    
    let languagesMap = new Map();
	let result = "";
	
	window.addEventListener("DOMContentLoaded",run);
		
	function getMovieList(key,value){
		console.log("key = " + key + ", value = " + value)
	}
	function alertMovieList(key,value){
		alert("location.href=\"http://yourLinkHere.test?key=" + key + "&value=" + value + "\"")
	}
    function run(e){
		languagesListDiv = document.getElementById("languagesListDiv");
		getLanguages();
	}
    function getLanguages() {
    languagesArray.forEach( languages => {
	languagesListDiv.innerHTML += `<li class="capitalize"><a href="index.html"  onclick="event.preventDefault();alertMovieList('${languages[0]}','${languages[1]}')">key = ${languages[0]}, value = ${languages[1]}</a></li>`;
	getMovieList(languages[0],languages[1]);
        });
    }

<!-- language: lang-html -->

<ul id="languagesListDiv">
	
</ul>

<!-- end snippet -->