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="https://stackoverflow.com/questions/72167285/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>

3

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="https://stackoverflow.com/questions/72167285/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>