CODEWITHSUNDEEP
javascripthtmlcss
griff-223
griff-223

Reputation: 9

onclick Not Firing in Nested div

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.

Update: After removing the z-index from .hold and .wheelDiv and adding 8 segments, all segments except 2, 3, and 4 properly fire the onclick event.

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('wheelPiece1')"></div></div>
            <div id="wheelPiece2" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece2')"></div></div>
            <div id="wheelPiece3" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece3')"></div></div>
            <div id="wheelPiece4" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece4')"></div></div>
            <div id="wheelPiece5" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece5')"></div></div>
            <div id="wheelPiece6" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece6')"></div></div>
            <div id="wheelPiece7" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece7')"></div></div>
            <div id="wheelPiece8" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece8')"></div></div>
            <div id="wheelPiece9" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece9')"></div></div>
            <div id="wheelPiece10" class="hold"><div class="wheel" onclick="segmentClick('wheelPiece10')"></div></div>
            <div class="innerCircle"></div>
          </div>
    </body>
</html>

CSS:

.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);
  background-size: cover;
  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);
  background-color: red;
}

.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);
}
#wheelPiece3 {
  transform: rotate(72deg);
}
#wheelPiece3 .wheel{
  background-color: darkgrey;
  transform: rotate(36deg);
}
#wheelPiece4 {
  transform: rotate(108deg);
}
#wheelPiece4 .wheel{
  background-color: black;
  transform: rotate(36deg);
}
#wheelPiece5{
  transform: rotate(144deg);
}
#wheelPiece5 .wheel {
  background-color: lightblue;
  transform:rotate(36deg);
}  
#wheelPiece6{
  transform:rotate(180deg);
}
#wheelPiece6 .wheel {
  background-color: darkcyan;
  transform:rotate(36deg);
}  
#wheelPiece7{
  transform:rotate(216deg);
}
#wheelPiece7 .wheel {
  background-color: lightcoral;
  transform:rotate(36deg);
}  
#wheelPiece8{
  transform:rotate(252deg);
}
#wheelPiece8 .wheel {
  background-color: coral;
  transform:rotate(36deg);
}  
#wheelPiece9{
  transform:rotate(288deg);
}
#wheelPiece9 .wheel {
  background-color: burlywood;
  transform:rotate(36deg);
}  
#wheelPiece10{
  transform:rotate(324deg);
}
#wheelPiece10 .wheel {
  background-color: brown;
  transform:rotate(36deg);
}

JavaScript:

function init(){
    console.log('Called function init().');
}

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

I have established that .hold is blocking segments 2, 3, and 4 because it extends too far. To illustrate such, I set the background color to red. I have manipulated the .hold class in many ways without success.

Upvotes: 0

Views: 113

Answers (1)

Yuvaraj M
Yuvaraj M

Reputation: 4578

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>

Upvotes: 4

Related Questions