将 html 元素添加到 EventListener 屁股回调函数中

Question

I have a button where I want to add some data, from a file, into an event listener as a callback function

function jokesFunc(){
const allJokes = jokes.getJokes().map(joke => "<li>"+joke+"</li>");
document.getElementById("jokes").innerHTML = allJokes.join("");
};


document.getElementById("container").addEventListener('click', jokesFunc)

here I have made a callback function, that is supposed to show jokes, whenever a button is clicked, but it says:

 Cannot read property 'addEventListener' of null

even tough I have an element with an id of the container in my HTML code

I have made a function, that adds "jokes" elements in the my "container" div, whenever it is clicked, but since it is an anonymous function, how can I pass in the callback function?

Answer 1

If you are so sure that there is a #container in the document, then, this is a subtle problem. Please I have no solution but guide that can help you to figure out what is happening. (1) Check if any other id can be sellected with all your code (2) Comment out all your code and check if you can select an id and addEventListener to it. Note that if you added an eventlistener to an element that is not available during page load, js will throw error. Check if the constant allJokes has value by step running the file (inspect it)