'addEventListener' and 'onclick' working only on 'window' Element and-CodePudding

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 >
            <div  id="col1">
                <button type="button" id="player">Player</button>
                <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p>
            </div>
            <div  id="col2">
                <button type="button" id="reset">Reset Game</button>
                <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p>
            </div>
            <div  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>

CodePudding user response：

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 >
            <div  id="col1">
                <button type="button" id="player">Player</button>
                <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p>
            </div>
            <div  id="col2">
                <button type="button" id="reset">Reset Game</button>
                <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p>
            </div>
            <div  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 >
    <div  id="col1">
      <button type="button" id="player">Player</button>
      <p id="text1" style="display:inline; margin-left: 50px;">Dice Value:</p>
    </div>
    <div  id="col2">
      <button type="button" id="reset">Reset Game</button>
      <p id="text3" style="display:inline; margin-left: 50px;">Reset?</p>
    </div>
    <div  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>