How to select all tag and register onclick event?

Question

I am trying to select all the <a> tags in the page and register onclick even to them.

My codes:

document.getElementsByTagName('a').onclick = show;


var show = function(){
    alert('hahahha');
}

It doesn't work and my brain is fry now. Any ideas? Thanks a lot.

Answer 1

You're setting the onclick attribute to the array of elements, not to each element individually like you need. Also, you're defining show after you've used it.

var elts = document.getElementsByTagName('a');
var show = function() { alert('hahahha'); }
for (var i = elts.length - 1; i >= 0; --i) {
    elts[i].onclick = show;
}

It's more efficient to iterate backwards through the array than to test elts.length each time through. If you need to iterate forward, store the array length in a variable for better efficiency.

Answer 2

you need to assign onclick event to all the <a> tags separately as follow:

var s=document.getElementsByTagName('a');
var show = function(){
   alert('hahahha');
}
for (var i=0;i<s.length;i++)  
{  
 s[i].onclick = show;      
} 

Answer 3

document.getElementsByTagName('a') returns an array thus try this:

    var arr = document.getElementsByTagName('a');
    for(var key in arr){
      arr[key].onclick = show;
    }

Haven't tested it but it should work

Answer 4

Why not use Jquery, It will be simplest solution in javascript.

You can use like below

$("a").on("click", function(event){
    alert('hahahha');
});

Refer this documentation. You can use Jquery 1.7 onwards.

Answer 5

Yes we can solve above issue using both java script as well as jquery:

Javascript:

   var aLinks=document.getElementsByTagName('a'); // returns array of all <a> link objects

    //Function to be bind with link object
    var show = function(){
          alert("Now Show function has been binded...hahahhaha..!");
    }

    //Now we have to bind click event with each link object. 
    for(var i=0;i<aLink.length;i++){
       aLinks[i].onclick=show;
    }

Another Alternate way to bind all link tags with any event is to use jQuery and It provides easiest way for this kind of binding troubles.

But for that first of all we have to include jquery.js javascript file (better to use latest version).

jQuery:

$(function(){
    $("a").click(function(e){
             alert("Now Show function has been binded...hahahhaha..!");
      });
});

Answer 6

Thanks to the new JS standards this can be done easily. All my a tags had the class nav-link. So I selected them all (which gave me a node list) and ran forEach over them all and added a function to call whenever one of the nodes were selected. Hope this helps!

let navLink = document.querySelectorAll('.nav-link');
const navbar = document.querySelector('#navbarNav');

closeNavBar = () => {
    navbar.classList.remove('show');
};

navLink.forEach((nav) => nav.addEventListener('click', closeNavBar));