addEventListener isn't working with multi elements by getElementsByClassName

Question

I'm trying to use addEventListener click with two buttons having the same class but it isn't working!

This is the html:

<div class="share-block">
  <a href="#" class="btn-rounded share-btn"><i class="fa fa-share-alt fa-2x"></i></a>
  <div class="social-block">
    <a href="http://facebook.com/share" class="btn-rounded btn-sm social-btn btn-fb"><i class="fa fa-facebook"></i></a>
    <a href="http://twitter.com/share" class="btn-rounded btn-sm social-btn btn-tw"><i class="fa fa-twitter"></i></a>
  </div>
</div>

And here's the javascript code:

var socialBtns = document.getElementsByClassName('social-btn');

for (var i = 0; i < socialBtns.length; i++) {
  socialBtns[i].addEventListener('click', function(event) {
    window.open(socialBtns[i].href, "Share", "width=600,height=400");
    event.preventDefault();
  });
}

http://jshint.com/: Warning: `Don't make functions within a loop`. — Danny Fardy Jhonston Bermúdez, Nov 16 '17 at 17:37
@DannyFardyJhonstonBermúdez Why shouldn't I do that may you explain? — Abdulaziz B., Nov 16 '17 at 17:49
There is a post related. See this link: https://stackoverflow.com/questions/3037598/how-to-fix-jslint-error-dont-make-functions-within-a-loop. — Danny Fardy Jhonston Bermúdez, Nov 16 '17 at 19:25

score 1 · Accepted Answer · edited Nov 16 '17 at 17:45

Use this.href on your event handlers instead of referencing the socialBtns variable in the for-loop:

var socialBtns = document.getElementsByClassName('social-btn');

for (var i = 0; i < socialBtns.length; i++) {
    socialBtns[i].addEventListener('click', function(event) {
       window.open(this.href, "Share", "width=600,height=400");
       event.preventDefault();
    });
}

You could also improve on the existing code by creating the event handler outside of the for-loop:

var socialBtns = document.getElementsByClassName('social-btn');

for (var i = 0; i < socialBtns.length; i++) {
  socialBtns[i].addEventListener('click', openSocialLink);
}

function openSocialLink(event) {
  window.open(this.href, "Share", "width=600,height=400");
  event.preventDefault();
}

JSFiddle sample

addEventListener isn't working with multi elements by getElementsByClassName

1 Answers1