addEventListener가 getElementsByClassName에 의해 다중 요소와 함께 작동하지 않습니다.

Question

의 버튼이 두 개 있지만 작동하지 않습니다. addEventListenerclick을 사용하려고합니다!

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

그리고 여기 javascript 코드입니다 :

이

은 html입니다

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

대신에 루프에 socialBtns 변수를 참조하는 이벤트 핸들러에

Answer 1

사용 this.href :

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

당신은 또한 외부의 이벤트 핸들러를 작성하여 기존의 코드를 향상시킬 수에 대한 루프 :

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