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>