'addEventListener' 和 'onclick' 仅适用于 'window' 元素而不适用于任何其他元素（例如按钮）
[英]'addEventListener' and 'onclick' working only on 'window' Element and NOT any other Element(such as button)
问题描述
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.
我正在尝试在 JavaScript 中制作蛇梯棋盘游戏，并尝试向游戏按钮添加“onclick”或“addEventListener”事件。 But when I am trying to add them to my buttons through pb.addEventListener("click",p1click);但是当我试图通过pb.addEventListener("click",p1click);将它们添加到我的按钮时, they are NOT working. ，他们不工作。 But when I am adding these events to my "window" element through window.addEventListener("click",p1click);但是当我通过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 个解决方案
解决方案1
1 已采纳 2022-05-09 06:02:26
Do the buttons have to be stacked on top of the canvas?按钮是否必须堆叠在 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)它们能否不只是在 canvas 元素之上，并且您相应地处理 canvas 大小（例如从 innerHeight 中减去边距，就像我在下面所做的那样）
You can then also remove the margin-tops.然后，您还可以删除 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:编辑：如果您真的想将行堆叠在 Canvas 之上，您可以在该行上使用 position absolute 以及高 z-index 以将其放在 canvas 之上。请参见下面的代码段：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.