How to add javascript onclick event listener to container div?

Question

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>

when do you add the event listener? If it happens before the DOM is loaded, it won't find the `engineersContainer` element. — mykaf, Nov 05 '21 at 21:09
@user1599011 Stack Snippet executes the JS after the HTML is loaded. — Barmar, Nov 05 '21 at 21:14
I also tried adding it inside of a `$(document).ready` and an onload function and still didn't work. — bart cubrich, Nov 05 '21 at 21:15
@Barmar, good to know, although their original code may not do the same. — mykaf, Nov 05 '21 at 21:18
If that were the problem he'd be getting an error in the console. — Barmar, Nov 05 '21 at 21:20

mplungjan · Accepted Answer · 2021-11-05T21:30:57.640

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">

I need that div to be visually behind other divs though. I added it to my question. — bart cubrich, Nov 05 '21 at 21:17
I tried to see the difference. Why does it visually need to be behind? — mplungjan, Nov 05 '21 at 21:22
If you look at my modified code, there is a blue banner that is behind the Header text, that is a different color than the rest of the div. — bart cubrich, Nov 05 '21 at 21:23
That is because the z-index: -1 is back of all other elements, that why when you try to click if you click the elements in the front based on the z-index criteria, check this for more information: https://stackoverflow.com/a/32109733/9676887 — Jose Lora, Nov 05 '21 at 21:27

cbmorris · Answer 2 · 2021-11-05T21:30:04.247

document.getElementById("engineersContainer").onclick=function(){   
console.log("your event");
}

.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;
}

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

<body>
<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>


</body>

ng-js -->

document.getElementById("engineersContainer").onclick=function(){   
console.log("your event");
}

    <div id="engineersContainer"> Here is the Engineers Container
    </div>

I would use an anonymous function for this. You must call the script after your div has been created, as Javascript is read top to bottom and will not have a reference if it is run before the div has been placed.

Beware that if you have a listener on the container div, it will impact your ability to introduce any clickable options within the divs child elements such as buttons later on. Could this cause you problems in the future? If so rethink the design possibly to save you some trouble later. Also, the negative Z index needs to be removed as it is being drawn beneath the layer that Javascript detects the clicks. Sorry for the edits I'm new to StackO.

score 0 · Answer 3 · answered Nov 05 '21 at 21:23

You need to remove the z-index: -1 in your CSS.

Any user clicks are not making contact with the element, but with the document above the element.

Working Example:

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;
}

.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>

How to add javascript onclick event listener to container div?

3 Answers3

Linked