'How to make onclick select the div square the image is on not the image itself

The onClick event listener gets blocked by image and the square-box container behind it wont change color. How do I get around this so when I click on the checker piece image, the square-box behind it changes color?

Here's a video demonstration: https://www.youtube.com/watch?v=o4kXo4EWuZE

HTML Code

<!DOCTYPE html>
<html>
         <head></head>
<body>
<script src="test.js"></script>

<input type="button" onclick="checkers()" value="Checkers">

<br>
<br>
<checkerboard>
</checkerboard>
<br>
<br>

<br>
<br>
</body>
</html>

Javascript code

'use strict'


// generates a parent container for the event listener.
function main_container(flag)
{
        let body = document.getElementsByTagName("checkerboard");
        let maincontainer = document.createElement("main-container1");
        body[0].append(maincontainer);
        maincontainer.setAttribute("id", 'main00');
        maincontainer.style.border= "thick double black";
        maincontainer.style.display = "inline-block";
        return maincontainer;

}

// generates a parent row container to score grid squares.
function UI_box(UI_box_number,flag)
{
    let body;

    body = document.getElementsByTagName("main-container1");

    let Rowcontainer = document.createElement("div");
    body[0].append(Rowcontainer);
    Rowcontainer.setAttribute("class", "row-container");
    Rowcontainer.style.display = "flex";
    return Rowcontainer;
}

//generates the squares
function square(Rowcontainer, color)
{
    let square = document.createElement('div');
    square.setAttribute("class", 'square-box');
    square.style.width = "80px";
    square.style.height = "80px";
    square.style.margin = "2px 2px 2px 2px";
    square.style.backgroundColor = color;
    Rowcontainer.append(square);
    return square;

}

function clickevent()
{
    let maincontainer = document.getElementById("main00");
    let selected;
    let color;

    maincontainer.addEventListener("click", function onClick(event)
    {

        let target=event.target;

        if(target.classList.contains("square-box"))
        {
            if(selected !=null)
            {
                selected.classList.add(selected.style.backgroundColor = color);
            }

            color=target.style.backgroundColor;
            target.classList.add(target.style.backgroundColor = "blue");
            selected=target;
        }

    });


}


function checkers()
{

    let body = document.getElementsByTagName("body");
    main_container(0);

    let color = "";
    
    // loop down the rows. 8 is number of rows
    for(let rowloop = 0; rowloop < 8; rowloop++)
    {
      
        //create new container for the row.
        let Rowcontainer = UI_box(String(rowloop), 0);
    
        // loop across the columns. 8 is number of columns
        for(let columnloop = 0; columnloop < 8; columnloop++)
        {
        
            if(columnloop % 2 == 0 && rowloop %2 == 0)
            {
                color = "red";
            }
            else 
            {
                color = "black";

                if(rowloop % 2 != 0 && columnloop % 2 != 0)
                {
                    color = "red";
                }
            }
            
            // generates a parameterized square and attaches it to the row container.
            if(color=='black' && rowloop <3)
            {
                let img = document.createElement("img");
                img.src = "red.png";

                let block1= square(Rowcontainer, color, rowloop, columnloop, img);
                block1.append(img.cloneNode());
            }
            else if(color=='black' && rowloop >4)
            {
                let img = document.createElement("img");
                img.src = "white.png";

                let block1= square(Rowcontainer, color, rowloop, columnloop, img);
                block1.append(img.cloneNode());
            }
            else
            {
                square(Rowcontainer, color, rowloop, columnloop);
            }
            

        }
    }

     clickevent();

}
javascripthtml


Solution 1:[1]

Add pointer-events="none" to the checkers'style. You can do it in JavaScript like this:

let img = document.createElement("img");
img.src = "red.png";
img.style.pointerEvents = "none";

and, similarly:

let img = document.createElement("img");
img.src = "white.png";
img.style.pointerEvents = "none";

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 GOTO 0

Related Questions