Question

I caught a flaw in this script I’m using; It’s calling the global ‘a’ tag – which is killing me.

What it the proper way to define a specific classes link within the ‘a’ tag within the snippet below?

var allLinks = document.getElementsByTagName('.mainnav');

Clearly that didn’t work; either did .mainnav a

Full snippet:

var ss = {
  fixAllLinks: function() {
    // Get a list of all links in the page
    var allLinks = document.getElementsByTagName('.mainnav');
    // Walk through the list
    for (var i=0;i<allLinks.length;i++) {
      var lnk = allLinks[i];
      if ((lnk.href && lnk.href.indexOf('#') != -1) && 
          ( (lnk.pathname == location.pathname) ||
        ('/'+lnk.pathname == location.pathname) ) && 
          (lnk.search == location.search)) {
        // If the link is internal to the page (begins in #)
        // then attach the smoothScroll function as an onclick
        // event handler
        ss.addEvent(lnk,'click',ss.smoothScroll);
      }
    }
  },

Update: After swapping out different tags; and trying to call with classes the script stopped functioning. Here’s the full plugin; http://www.kryogenix.org/code/browser/smoothscroll/ I just want to use this with specific classes as opposed to all ‘a’ tags.

Suggestions; thanks.

Answer 1

.mainnav isn’t a tag, so getElementsByTagName won’t work. Perhaps you’re looking for:

var allLinks = document.getElementsByClassName('mainnav');

https://developer.mozilla.org/en-US/docs/DOM/document.getElementsByClassName

or in jQuery:

$('.mainnav');