1

Given this HTML:
1st Row

 <ul class="myList">
   <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
   </li>
   <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
   </li>
   <li class="List" data-pos="James">
      <label><input class="text">Fail</label>
   </li>
 </ul>

HTML:
2nd Row

 <ul class="myList">
   <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
   </li>
   <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
   </li>
   <li class="List" data-pos="James">
      <label><input class="text">Fail</label>
   </li>
 </ul>

I am create a JavaScript function that will add new class to an element when the user clicks on it, based on the data-pos attribute of the element its Working perfect.

I tried the following javascript. it may add perfect class <li class="List Noah1"> or <li class="List Liam1"> or <li class="List James1">

1st problem are it is also add unnecessary 'null1' class on input. example: <input class="text null1">

2nd Problem are on this whole javascript are working on 1st row only. after 1st row it may not working on 2nd,3rd,4th,... on same page. we are add this code to codepen https://codepen.io/MrUmang/pen/WNoQvvq

function clickEvent(event) {
  let element = event.target
  if(element.tagName === 'LABEL') {
    element = event.target.parentElement;
  }
  element.classList.add(element.getAttribute('data-pos') + "1")
  console.log(element.classList)
}

document.querySelector('ul').addEventListener('click', clickEvent, false);


function clickEvent(event) {
      let element = event.target
      if(element.tagName === 'LABEL') {
        element = event.target.parentElement;
      }
      element.classList.add(element.getAttribute('data-pos') + "1")
      console.log(element.classList)
    }
   document.querySelector('ul').addEventListener('click', clickEvent, false);
body {
    color: #333;
    background-color: #eaeaea;
    padding: 13px 24px;
}

.List.Noah1:after {
  content:'\2713';
  display:inline-block;
  color:#09a526;
  vertical-align: top;
  padding:0 6px 0 0;
}
.List.Liam1:after {
  content:'\2717';
  display:inline-block;
  color:red;
  vertical-align: top;
  padding:0 6px 0 0;
}
.List.James1:after {
  content:'\2717';
  display:inline-block;
  color:red;
  vertical-align: top;
  padding:0 6px 0 0;
}
hr {
    height: 0px;
    border: 2px solid;
    width: 47%;
    text-align: -webkit-auto;
    display: inline-block;
}
.text {
    border: 0;
    width: 0;
    padding: 0;
}
<ul class="myList">
   <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
   </li>
   <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
   </li>
   <li class="List" data-pos="James">
      <label><input class="text">Average</label>
  </li>
 </ul>
<hr>
<ul class="myList">
   <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
   </li>
   <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
   </li>
   <li class="List" data-pos="James">
      <label><input class="text">Average</label>
  </li>
 </ul>
<hr>
<ul class="myList">
   <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
   </li>
   <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
   </li>
   <li class="List" data-pos="James">
      <label><input class="text">Average</label>
  </li>
 </ul>
<hr>
<ul class="myList">
   <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
   </li>
   <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
   </li>
   <li class="List" data-pos="James"> 
      <label><input class="text">Average</label>
  </li>
 </ul>

how to solve this problem?

  • we are also add this one on codepen https://codepen.io/MrUmang/pen/WNoQvvq –  Feb 03 '21 at 16:06
  • Does this answer your question? https://stackoverflow.com/questions/21700364/adding-click-event-listener-to-elements-with-the-same-class – isherwood Feb 03 '21 at 16:16
  • @RandyCasburn, both solutions are [provided as answers](https://stackoverflow.com/a/28106038/1264804) on that question. – isherwood Feb 03 '21 at 16:52

1 Answers1

0

The issue is you are only setting the handler on the very first ul.

The solution is to wrap your entire HTML structure. Perhaps with a div. Then set your handler on the wrapper element like this:

document.querySelector('div').addEventListener('click', clickEvent, false);

Here is a complete working solution:

function clickEvent(event) {
  let element = event.target
  if (element.tagName === 'LABEL') {
    element = event.target.parentElement;
  }
  element.classList.add(element.dataset.pos + "1")
}
document.querySelector('div').addEventListener('click', clickEvent, false);
body {
  color: #333;
  background-color: #eaeaea;
  padding: 13px 24px;
}

.List.Noah1:after {
  content: '\2713';
  display: inline-block;
  color: #09a526;
  vertical-align: top;
  padding: 0 6px 0 0;
}

.List.Liam1:after {
  content: '\2717';
  display: inline-block;
  color: red;
  vertical-align: top;
  padding: 0 6px 0 0;
}

.List.James1:after {
  content: '\2717';
  display: inline-block;
  color: red;
  vertical-align: top;
  padding: 0 6px 0 0;
}

hr {
  height: 0px;
  border: 2px solid;
  width: 47%;
  text-align: -webkit-auto;
  display: inline-block;
}

.text {
  border: 0;
  width: 0;
  padding: 0;
}
<div>
  <ul class="myList">
    <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
    </li>
    <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
    </li>
    <li class="List" data-pos="James">
      <label><input class="text">Average</label>
    </li>
  </ul>
  <hr>
  <ul class="myList">
    <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
    </li>
    <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
    </li>
    <li class="List" data-pos="James">
      <label><input class="text">Average</label>
    </li>
  </ul>
  <hr>
  <ul class="myList">
    <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
    </li>
    <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
    </li>
    <li class="List" data-pos="James">
      <label><input class="text">Average</label>
    </li>
  </ul>
  <hr>
  <ul class="myList">
    <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
    </li>
    <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
    </li>
    <li class="List" data-pos="James">
      <label><input class="text">Average</label>
    </li>
  </ul>
  <hr>
  <ul class="myList">
    <li class="List" data-pos="Noah">
      <label><input class="text">Pass</label>
    </li>
    <li class="List" data-pos="Liam">
      <label><input class="text">Fail</label>
    </li>
    <li class="List" data-pos="James">
      <label><input class="text">Average</label>
    </li>
  </ul>
</div>
Randy Casburn
  • 13,840
  • 1
  • 16
  • 31