small javascript solution need : is this line a valid code?

Question

In Html file,I have many statements like this :

<li class="menu"><a href="#">1st menu</a></li>

And in javascript file,I have code like this :

1. function onload()
2. {
3.  var lists=document.getElementsByTagName("li");
4.  for(var i=0;i<lists.length;i++){
5.      if(lists[i].className=="menu"){
6.          lists[i].a.onclick=genmenu;
7.      }
8.  }
9. }

function genmenu(){
    alert("this is an alert");
    return false;
}

Problem is, if i click on the link '1st menu', it doesn't show alert. But if i change the line 6 and write:

lists[i].onclick=genmenu;

Then this link works and show alert.

My Question, Why line 6 (lists[i].a.onclick=genmenu;) does'nt work? Isn't it a valid code?

Sampson · Accepted Answer · 2012-05-26 05:03:30Z

2

You cannot access nested elements as members of another element:

lists[i].a

This is looking for a member of the list[i] element with a name of a - it's not looking for an anchor within it. If you wanted the anchor, you'd write:

list[i].getElementsByTagName("a")[0];

answered May 26, 2012 at 5:03

Sampson

269k76 gold badges546 silver badges570 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gary · Accepted Answer · 2012-05-26 05:03:01Z

1

a is not a property of li, it is a nested tag. You'd have to use

lists[i].getElementsByTagName('a')[0];

As a side note, be careful with if(lists[i].className=="menu") because if one of your li's class is "menu otherClass" it will no longer work. jQuery has a good method to handle this: hasClass() but it'd be easy to write something similar if you're not using jQuery.

answered May 26, 2012 at 5:03

Gary

14k18 gold badges54 silver badges73 bronze badges

3 Comments

Md Kowsar Hossain Over a year ago

Thank you too for Quick feedback

cHao Over a year ago

In fact, there's already something rather similar to jQuery's selection stuff...document.querySelectorAll('li.menu a[href]') will give you all the links inside a list item with a class of 'menu'. Difference being, (1) jQuery works in IE7 :P, and (2) jQuery adds pseudo-selectors and such that aren't present in some versions of CSS.

HBP Over a year ago

querySelectorAll is part of the DOM standard and available on most modern browsers without the need to load JQuery. See developer.mozilla.org/en/DOM/document.querySelectorAll

icktoofay · Accepted Answer · 2012-05-26 06:23:57Z

0

On modern browsers your code can be simpler and more efficient:

function onload () {
   var links = document.querySelectorAll ('li.menu a[href]');
   for (var i= links.length; i--;) {
     links[i].addEventListener ('click', genmenu, false);
   }
}

function genmenu () {
    alert ("this is an alert");
    return false;
}

For more information, see the documentation on querySelectorAll.

edited May 26, 2012 at 6:23

icktoofay

130k23 gold badges261 silver badges239 bronze badges

answered May 26, 2012 at 6:12

HBP

16.1k6 gold badges30 silver badges34 bronze badges

Collectives™ on Stack Overflow

small javascript solution need : is this line a valid code?

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related