onclick Not Firing in Nested div

January 10, 2023

I am trying to make different segments of a wheel clickable and have been unable to determine why the onclick event will not fire. For brevity, I will include code for two wheel segments.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body onload="init()">
        <div class="wheelDiv">
            <div id="wheelPiece1" class="hold"><div class="wheel" onclick="segmentClick(1)"></div></div>
            <div id="wheelPiece2" class="hold"><div class="wheel" onclick="segmentClick(2)"></div></div>
            <div class="innerCircle"></div>
          </div>
    </body>
</html>

CSS:

.wheelDiv {
  height: 150px;
  width: 150px;
  border-radius: 100%;
  position: relative;
  z-index: -1;
}

.wheel {
  transition: all 1s;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 75px, 150px, 0px);
  z-index: 1;
}

.hold {
  border-style: solid;
  border-width: 1px;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 150px, 150px, 75px);
  z-index: -1;
}

.innerCircle{
  width: 10px;
  height: 10px;
  top: 47%;
  left: 47%;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: white;
  border-radius: 100%;
  z-index: 1;
}

#wheelPiece1 .wheel {
  transform: rotate(36deg);
  background-color: lightgrey;
}  
#wheelPiece2 {
  transform: rotate(36deg);
}
#wheelPiece2 .wheel{
  background-color: grey;
  transform: rotate(36deg);
}

JavaScript:

function init(){
    console.log('Called function init().');
}
function segmentClick(segment){
    console.log("You clicked "+segment+".");
}

I presume it is a nesting issue because adding the segmentClick() function to the "wheelDiv" onclick event produces the expected result. I tried moving the onclick event from class="wheel" to class="hold" without success. I have also adjusted the z-index of different elements, also without success.

>Solution :

Welcome to StackOverflow!,
The click event is not triggred beacuse of z-index you where applying for both parent and child, so they over lapping each other.
I just removed the z-index for wheelDiv and hold

function init(){
    console.log('Called function init().');
}
function segmentClick(segment){
    console.log("You clicked "+segment+".");
}

.wheelDiv {
  height: 150px;
  width: 150px;
  border-radius: 100%;
  position: relative;
}

.wheel {
  transition: all 1s;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 75px, 150px, 0px);
  z-index: 1;
}

.hold {
  border-style: solid;
  border-width: 1px;
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  clip: rect(0px, 150px, 150px, 75px);
}

.innerCircle{
  width: 10px;
  height: 10px;
  top: 47%;
  left: 47%;
  position: absolute;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  background-color: white;
  border-radius: 100%;
  z-index: 1;
}

#wheelPiece1 .wheel {
  transform: rotate(36deg);
  background-color: lightgrey;
}  
#wheelPiece2 {
  transform: rotate(36deg);
}
#wheelPiece2 .wheel{
  background-color: grey;
  transform: rotate(36deg);
}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>
    <body onload="init()">
        <div class="wheelDiv">
            <div id="wheelPiece1"onclick="segmentClick(1)" class="hold"><div class="wheel" ></div></div>
            <div id="wheelPiece2"onclick="segmentClick(2)" class="hold"><div class="wheel" ></div></div>
            <div class="innerCircle"></div>
          </div>
    </body>
</html>