• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

21
Views
How to add javascript onclick event listener to container div?

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>

about 1 month ago ·

Juan Pablo Isaza

3 answers
Answer question

0

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

about 1 month ago · Juan Pablo Isaza Report

0

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.

about 1 month ago · Juan Pablo Isaza Report

0

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>

about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.