Question 49886 in Javascript Question posted in
A very good W3school tutorial can be found here.

onclick event returns undefined function – Javascript

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.

Tags:

2

Answers


  1. 0

    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.

    function getMovieList() {
  alert('movie list');
  location.href="index.html";
  }
    <li>
   <a href="index.html" onclick="event.preventDefault();getMovieList()">language</a>
</li>
    Login or Signup to reply.
  2. 0

    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.

        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]);
        });
    }
    <ul id="languagesListDiv">
    
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search