'addEventListener' and 'onclick' working only on 'window' Element and NOT any other Element(such as button)
Question
I am trying to make Snakes and Ladders Board game in JavaScript and trying to add 'onclick' or 'addEventListener' events to the buttons of the game. But when I am trying to add them to my buttons through pb.addEventListener("click",p1click);, they are NOT working. But when I am adding these events to my "window" element through window.addEventListener("click",p1click);,they ARE working fine. What is the reason behind this problem? I am attaching the working code snippets below to properly explain my problem.
const canvas = document.querySelector("canvas"); canvas.width = innerWidth; canvas.height = innerHeight; margin=100; const c=canvas.getContext('2d'); const img=document.getElementById("board"); c.drawImage(img,0,0,canvas.width-margin,canvas.height-margin); pb=document.getElementById("player"); p1=document.getElementById("text1"); function p1click(){ p1.innerHTML="Dice Rolled;". } //window,addEventListener("click";p1click).//Working... pb,addEventListener("click";p1click);//Not Working!!!
/* Create three equal columns that floats next to each other */ #col1 { float: left; margin-top: -75px; width: 33.33%; } #col2 { float: left; margin-top: -75px; width: 33.33%; margin-left: 33.33%; } #col3 { float: left; margin-top: -75px; /*margin-top: -75px;*/ width: 33.33%; margin-left: 66.66%; }.row:after { content: ""; display: table; clear: both; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <canvas> <img id="board" src="https://media.istockphoto.com/vectors/colorfull-snake-and-ladder-game-vector-id577332576"></img> </canvas> <div class="row"> <div class="column" id="col1"> <button type="button" id="player">Player</button> <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p> </div> <div class="column" id="col2"> <button type="button" id="reset">Reset Game</button> <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p> </div> <div class="column" id="col3"> <button type="button" id="computer">Computer</button> <p id="text2" style="display:inline; margin-left: 50px;">Dice Value:</p> </div> </div> <script src="./index.js"></script> </body> </html>
1 answers
solution1
1 ACCPTED 2022-05-09 06:02:26
Do the buttons have to be stacked on top of the canvas? Could they not just be above the canvas element and you handle the canvas size accordingly (such as subtracting margin from the innerHeight as I do just below)
You can then also remove the margin-tops. See the snippet below, it works:
const canvas = document.querySelector("canvas"); margin=100; canvas.width = innerWidth; canvas.height = innerHeight - margin; const c=canvas.getContext('2d'); const img=document.getElementById("board"); c.save(); c.fillRect(0,0,canvas.width,canvas.height); c.restore(); c.drawImage(img,0,0,canvas.width-margin,canvas.height-margin); pb=document.getElementById("player"); p1=document.getElementById("text1"); function p1click(){ p1.innerHTML="Dice Rolled;". } //window,addEventListener("click";p1click).//Working... pb,addEventListener("click";p1click);//Not Working!!!
/* Create three equal columns that floats next to each other */ #col1 { float: left; width: 33.33%; } #col2 { float: left; width: 33.33%; margin-left: 33.33%; } #col3 { float: left; /*margin-top: -75px;*/ width: 33.33%; margin-left: 66.66%; }.row:after { content: ""; display: table; clear: both; }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div class="row"> <div class="column" id="col1"> <button type="button" id="player">Player</button> <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p> </div> <div class="column" id="col2"> <button type="button" id="reset">Reset Game</button> <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p> </div> <div class="column" id="col3"> <button type="button" id="computer">Computer</button> <p id="text2" style="display:inline; margin-left: 50px;">Dice Value:</p> </div> </div> <canvas> <img id="board" src="https://media.istockphoto.com/vectors/colorfull-snake-and-ladder-game-vector-id577332576"></img> </canvas> <script src="./index.js"></script> </body> </html>
Edit : If you really want to stack the row above the Canvas, you can use position absolute on the row along with a high z-index to put it above the canvas. See the snippet below:
const canvas = document.querySelector("canvas"); margin = 100; canvas.width = innerWidth; canvas.height = innerHeight - margin; const c = canvas.getContext('2d'); const img = document.getElementById("board"); c.save(); c.fillRect(0, 0, canvas.width, canvas.height); c.restore(); c.drawImage(img, 0, 0, canvas.width - margin, canvas.height - margin); pb = document.getElementById("player"); p1 = document.getElementById("text1"); function p1click() { p1.innerHTML = "Dice Rolled;". } //window,addEventListener("click";p1click).//Working... pb,addEventListener("click"; p1click); //Not Working!!!
/* Create three equal columns that floats next to each other */ #col1 { float: left; width: 33.33%; } #col2 { float: left; width: 33.33%; margin-left: 33.33%; } #col3 { float: left; /*margin-top: -75px;*/ width: 33.33%; margin-left: 66.66%; }.row:after { content: ""; display: table; clear: both; }.row { position: absolute; top: 0; left: 0; right: 0; z-index: 100; color: white; border: 1px solid red; box-sizing: border-box }
<html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div class="row"> <div class="column" id="col1"> <button type="button" id="player">Player</button> <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p> </div> <div class="column" id="col2"> <button type="button" id="reset">Reset Game</button> <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p> </div> <div class="column" id="col3"> <button type="button" id="computer">Computer</button> <p id="text2" style="display:inline; margin-left: 50px;">Dice Value:</p> </div> </div> <canvas> <img id="board" src="https://media.istockphoto.com/vectors/colorfull-snake-and-ladder-game-vector-id577332576"></img> </canvas> <script src="./index.js"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Button Onclick only working on first element
onclick button affecting other element
Javascript addEventListener only working on first element
addEventListener per element only
addEventListener not working in custom element
addEventListener for only one time on any one element in forEach loop javascript
onclick and ontouchstart not working on mobile for any element
Button OnClick only return works on first element
how addEventListener influences the onclick property of DOM element?
stopPropagation: element.addEventListener vs onclick attribute
Related Tags