How to add javascript onclick event listener to container div?

November 5, 2021

Add onclick event listener to container div.

I tried the following, and as you can see, the event does not seem to be registered. How can I add the listener to this div?

The div id I want is "engineersContainer."

document.getElementById("engineersContainer").addEventListener("click", function(e) {

  console.log("It was clicked");
  alert("It was clicked");
});

.barContainer {
  margin: 2px;
  border: 2px solid black;
  border-radius: 20px;
  width: 200px;
  //width:-moz-fit-content; 
  //width: fit-content; 
  padding: 5px;
  overflow: hidden;
  position: relative;
  background: #34e8eb;
  z-index: -1;
}

.containerHeader:before {
    content:"";
    background: skyblue;
    position: absolute;
    inset: 0;
    z-index: -1;
    height:45px
}

<div id="engineersContainer" class="barContainer">
  <div id="engineerList" class="containerHeader" style="font-size:1.5em; text-align:center">Current Engineer </div>

  <div> Engineer's Name</div>


  <div id="clickText" style="padding-bottom: 10px; font-size:0.75em; text-align:center "> (Click to See All Permits) </div>


</div>

>Solution :

Remove the -1 z-index, otherwise it will be under the rest of the page
Add the event listener in the page load event

See second example for a workaround

window.addEventListener("load", function() {
  document.getElementById("engineersContainer")
    .addEventListener("click", function(e) {
      console.log("It was clicked");
    });
});

.barContainer {
  margin: 2px;
  border: 2px solid black;
  border-radius: 20px;
  width: 200px;
  //width:-moz-fit-content; 
  //width: fit-content; 
  padding: 5px;
  overflow: hidden;
  position: relative;
  background: #34e8eb;
  /*  z-index: -1 */
}

.containerHeader:before {
  content: "";
  background: skyblue;
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 45px
}

.containerHeader {
  font-size: 1.5em;
  text-align: center
}

#clickText {
  padding-bottom: 10px;
  font-size: 0.75em;
  text-align: center
}

<div id="engineersContainer" class="barContainer">
  <div id="engineerList" class="containerHeader">Current Engineer </div>
  <div> Engineer's Name</div>
  <div id="clickText"> (Click to See All Permits) </div>
</div>

Otherwise add another div on top of it

window.addEventListener("load", function() {
  document.getElementById("engineersContainerClick").addEventListener("click", function(e) {
      console.log("It was clicked");
  });
});

.barContainer {
  margin: 2px;
  border: 2px solid black;
  border-radius: 20px;
  width: 200px;
  //width:-moz-fit-content; 
  //width: fit-content; 
  padding: 5px;
  overflow: hidden;
  position: relative;
  background: #34e8eb;
  z-index: -1
}

#engineersContainerClick {
  margin: 2px;
  border-radius: 20px;
  width: 200px;
  height:70px;
  padding: 5px;
  border:none;
  overflow: hidden;
  position: absolute;top:0;
  background-color: transparent;
  z-index:999;
}

.containerHeader:before {
  content: "";
  background: skyblue;
  position: absolute;
  inset: 0;
  z-index: -1;
  height: 45px
}

.containerHeader {
  font-size: 1.5em;
  text-align: center
}

#clickText {
  padding-bottom: 10px;
  font-size: 0.75em;
  text-align: center
}

<div id="engineersContainer" class="barContainer">
  <div id="engineerList" class="containerHeader">Current Engineer </div>
  <div> Engineer's Name</div>
  <div id="clickText"> (Click to See All Permits) </div>
</div>
<div id="engineersContainerClick" class="barContainer">