I'm getting this error: Uncaught TypeError: Cannot call method 'match' of undefined in my JavaScript. I'm trying to write this without jQuery since it'll be the only js on the site.

My code is supposed to add a class, "active", to the <a href="...> in the navigation that links to the current page.

I'm guessing it might be the contentLoaded function?....source

Here's my code...(error occurs on line 9)...fiddle

(function(window, document, undefined) { contentLoaded(window, function() {

  var page = document.location.pathname.match(/[A-z]+$/)[0],
      nav_anchors = document.getElementsByTagName('header')[0]
                            .getElementsByTagName('nav')[0]
                            .getElementsByTagName('a');

  for(i in nav_anchors)
    if(nav_anchors[i].href.match(/[A-z]+$/)[0] = page) //LINE 9 <-- Error
      nav_anchors[i].classList.add('active');

})
})(this, this.document)

Thanks!

I'm getting this error: Uncaught TypeError: Cannot call method 'match' of undefined in my JavaScript. I'm trying to write this without jQuery since it'll be the only js on the site.

My code is supposed to add a class, "active", to the <a href="...> in the navigation that links to the current page.

I'm guessing it might be the contentLoaded function?....source

Here's my code...(error occurs on line 9)...fiddle

(function(window, document, undefined) { contentLoaded(window, function() {

  var page = document.location.pathname.match(/[A-z]+$/)[0],
      nav_anchors = document.getElementsByTagName('header')[0]
                            .getElementsByTagName('nav')[0]
                            .getElementsByTagName('a');

  for(i in nav_anchors)
    if(nav_anchors[i].href.match(/[A-z]+$/)[0] = page) //LINE 9 <-- Error
      nav_anchors[i].classList.add('active');

})
})(this, this.document)

Thanks!

• javascript

• 1 Don't use for (x in y) to browse an array or a NodeList. Use a regular for (var i = 0; i < y.length; ++i) loop. – Julien Royer Commented Nov 15, 2012 at 15:46

4 Answers 4

NodeLists have length, item and namedItem properties.

Use for (var i = 0; i < foo.length; i++) not for i in foo to iterate over them and only hit the nodes.

(function(window, document, undefined) { contentLoaded(window, function() {

  var page = document.location.pathname.match(/[A-z]+$/)[0],
      nav_anchors = document.getElementsByTagName('header')[0]
                            .getElementsByTagName('nav')[0]
                            .getElementsByTagName('a');

  for(var i=0;i<nav_anchors.length;i++)
    if(typeof nav_anchors[i].href != "undefined" && nav_anchors[i].href.match(/[A-z]+$/)[0] == page)
      nav_anchors[i].classList.add('active');

})
})(this, this.document)

Added a check if the href of the anchor is set, in case you have page anchors without href attributes (Such as <a name="top"> called using #top). Added a second = in the IF for it to work as exepected. And corrected the for syntax.

if(nav_anchors[i].href.match(/[A-z]+$/)[0] = page) //LINE 9 <-- Error

In javaScript the equals sign = is an assignment operator. You probably mean double equals == where you can check values without type coercion (5 == "5") or triple equals === for strong typed checks (where 5 !== "5").

Sometimes document.location.pathname.match(/[A-z]+$/) can be null. If you try to use document.location.pathname.match(/[A-z]+$/)[0] you can not access the 0 Element of null.