How to select all <a> tag and register onclick event?

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.

Answers:

Answer

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

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

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

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

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

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.