Can you dynamically add an event listener to variables in a for loop using Javascript

Question

I am trying to dynamically add an eventlistener to a group of li tags that will toggle a CSS class

const item = $('#dynamic-list').getElementsByTagName('li');

const strikeOut = () => this.classList = this.classList.toggle('strike-out');

const addClass = function() {
  for (let i = 0; i < item.length; i++) {
    let link = item[i];
    link.onclick = strikeOut;
  }
}

addClass();

.strike-item {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item">Item 1</li>
  <li class="dynamic-item">Item 2</li>
  <li class="dynamic-item">Item 3</li>
  <li class="dynamic-item">Item 4</li>
  <li class="dynamic-item">Item 5</li>
</ul>

I have a feeling that I'm not assigning the strikeout function correctly to each link however I'm open to all suggestions

CertainPerformance · Accepted Answer · 2018-07-19 04:18:57Z

Some problems to fix:

jQuery collections don't have a getElementsByTagName function. No need for jQuery, just use a plain querySelectorAll
Arrow functions do not capture their calling context - rather, they inherit the calling context of their surrounding block. Use a standard function instead so that the this inside strikeOut refers to the clicked element
Your CSS refers to strike-item, but your JS toggles a class name of strike-out.

After fixing:

const item = document.querySelectorAll('#dynamic-list li');

const strikeOut = function() {
  this.classList.toggle('strike-item');
}

const addClass = function() {
  for (let i = 0; i < item.length; i++) {
    let link = item[i];
    link.onclick = strikeOut;
  }
}

addClass();

.strike-item {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item">Item 1</li>
  <li class="dynamic-item">Item 2</li>
  <li class="dynamic-item">Item 3</li>
  <li class="dynamic-item">Item 4</li>
  <li class="dynamic-item">Item 5</li>
</ul>

But you might consider using event delegation instead, that way you only add one listener rather than a listener for every li:

document.querySelector('#dynamic-list')
  .addEventListener('click', (e) => {
    const { target } = e;
    if (!target.matches('li.dynamic-item')) return;
    target.classList.toggle('strike-item');
  });

.strike-item {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item">Item 1</li>
  <li class="dynamic-item">Item 2</li>
  <li class="dynamic-item">Item 3</li>
  <li class="dynamic-item">Item 4</li>
  <li class="dynamic-item">Item 5</li>
</ul>

Just code · Accepted Answer · 2018-07-19 04:22:58Z

You have many things going wrong here, getElementsByTagName is not a jquery selector its a javascript selector. Here is an example how to toggle :

const item = $('#dynamic-list li');

const strikeOut = (e) =>{ 
  $(e.target).toggleClass('strike-item')
}

const addClass = function() {
    for( let i=0; i<item.length; i++) {
        let link = item[i];
        link.onclick = strikeOut;
    }
}

addClass();

.strike-item {
    text-decoration: line-through;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dynamic-list" style="list-style: none;">
 <li class="dynamic-item">Item 1</li>
 <li class="dynamic-item">Item 2</li>
 <li class="dynamic-item">Item 3</li>
 <li class="dynamic-item">Item 4</li>
 <li class="dynamic-item">Item 5</li>
</ul>

Md. Abu Sayed · Accepted Answer · 2018-07-19 04:55:21Z

0

You Can Try Simple Code here

function myAction(me){
  me.classList.toggle('strike-out');
}

.dynamic-item.strike-out {
  text-decoration: line-through;
}

<ul id="dynamic-list" style="list-style: none;">
  <li class="dynamic-item" onClick="myAction(this)">Item 1</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 2</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 3</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 4</li>
  <li class="dynamic-item" onClick="myAction(this)">Item 5</li>
</ul>

answered Jul 19, 2018 at 4:55

Md. Abu Sayed

2,5363 gold badges21 silver badges30 bronze badges

Collectives™ on Stack Overflow

Can you dynamically add an event listener to variables in a for loop using Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related