addEventListener Executing Before Being Clicked

Question

I\'m Developing a basic Chrome extension centred around a video game. In order to create the menu I have used HTML and come up with:

    
        <         


        

Answer 1

You only need to pass the reference, as second parameter is a callback

document.querySelector("#startButtonImage").addEventListener('click', startGame);
document.querySelector("#infoButtonImage").addEventListener('click', openInfo);

Answer 2

Don't call the startGame and openInfo functions as you do here:

document.querySelector("#startButtonImage").addEventListener('click', startGame());
document.querySelector("#infoButtonImage").addEventListener('click', openInfo());

Instead do:

 document.querySelector("#startButtonImage").addEventListener('click', startGame);
 document.querySelector("#infoButtonImage").addEventListener('click', openInfo);

This passes the function itself as a parameter to the addEventHandler function, rather than the return value of the function.