Javascript not calling second function

Question

I'm trying to make a main menu for a game. The first frame contains buttons "Start game" and "Quit". The second frame contains buttons "Start", "Back" and a clickable icon for turning the in-game music on or off.

In my onload function I'm adding event listeners to both the "start game" button and the clickable icon. However, it seems, that it only registers the first event listener as when I changed the order the "start game" button stopped working too. What am I doing wrong and am I missing something about handling input with DOM?

window.onload = function (){
    document.getElementById("button_play").addEventListener("click", showInstructionPage);
    document.getElementById("Link_sound").addEventListener("click", setSound);
}
    
function setSound(){
        if(sound == 1){
            document.getElementById("Icon_sound").setAttribute("src", "../media/vypnuty_zvuk.png");
            sound = 0;
        }
        else{
            document.getElementById("Icon_sound").setAttribute("src", "../media/zapnuty_zvuk.png");
            sound = 1;
        }
    }
    
function showInstructionPage(){
    //this part is long but works
        document.getElementById("button_play").innerHTML = "Start";
        document.getElementById("button_play").style.left = "350px";
        
        var quit = document.getElementById("button_quit");
        var back = document.createElement("a");
        var id = document.createAttribute("id");
        id.value = "button_back";
        back.setAttributeNode(id);
        var link = document.createAttribute("href");
        link.value = "#";
        back.setAttributeNode(link);
        text = document.createTextNode("Back");
        back.appendChild(text);
        document.getElementById("menu").replaceChild(back, quit);
        document.getElementById("button_back").style.left = "346px";
        
        //add instructions and sound icon
        var header = document.createElement("h1");
        text = document.createTextNode("Instructions");
        header.appendChild(text);
        document.getElementById("menu").appendChild(header);
        var id = document.createAttribute("id");
        id.value = "Header_instructions";
        header.setAttributeNode(id);
        
        var goal = document.createElement("p");
        text = document.createTextNode("Your goal is to get as many frogs to the other side of the river without losing all your lives. To do this, you need to avoid the traffic and alligators.");
        goal.appendChild(text);
        document.getElementById("menu").appendChild(goal);
        var id = document.createAttribute("id");
        id.value = "Paragraph_goal";
        goal.setAttributeNode(id);
        
        var instructions = document.createElement("p");
        text = document.createTextNode("Move in any direction using the arrow keys");
        instructions.appendChild(text);
        document.getElementById("menu").appendChild(instructions);
        var id = document.createAttribute("id");
        id.value = "Paragraph_instructions";
        instructions.setAttributeNode(id);
        
        var soundLink = document.createElement("a");
        var link = document.createAttribute("href");
        link.value = "#";
        soundLink.setAttributeNode(link)
        var id = document.createAttribute("id");
        id.value = "Link_sound";
        soundLink.setAttributeNode(id);
        var soundImage = document.createElement("img");
        var id = document.createAttribute("id");
        id.value = "Icon_sound";
        soundImage.setAttributeNode(id);
        var source = document.createAttribute("src");
        source.value = "../media/zapnuty_zvuk.png";
        soundImage.setAttributeNode(source);
        soundLink.appendChild(soundImage);
        document.getElementById("menu").appendChild(soundLink);
}

<html>
    <head>
        <meta charset="UTF-8">
        <title>FROGGER</title>
        <link rel="stylesheet" href="../css/styles.css" type="text/css">
        <script type="text/javascript" src="../js/main.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <div id="menu">
                <img id="game_title" src="../media/title.png">
                <a href="#" id="button_play">Start game</a>
                <a href="#" id="button_quit">Quit</a>
            </div>
            <canvas id="canvas" width="800" height="800"></canvas>
            <img src="../media/menu_background.jpg" hidden="true" id="menuBackground">
        </div>
    </body>
</html>

There is no element with ID "Link_sound". Worth looking into: [What is DOM Event delegation?](https://stackoverflow.com/q/1687296) — VLAZ, Apr 07 '21 at 19:10
I'm adding it with DOM near the bottom of the showInstructionPage() function — Marian, Apr 07 '21 at 19:13
It's probably a timing issue. Try to add setTimeout to setSound function to see if it will work. "Link_sound" with capital "L" is correct? — Bulent, Apr 07 '21 at 19:18

score 0 · Accepted Answer · answered Apr 07 '21 at 19:28

The issue was, that when I called

document.getElementById("Link_sound").addEventListener("click", setSound);

inside the .onload function it couldn't assign the event listener because at the time of loading the page the clickable image doesn't exit yet, as it is only created using DOM after clicking a button. I solved it by moving the code snipped above to the bottom of the showInstructionPage() function after creating the image element.

Javascript not calling second function

1 Answers1