<ul><li>列出添加onclick的项目

Question

I'm trying to add onclick to my list items and get the href with pure JavaScript. I had it working from just a div but as soon as I added list items I was unable to get it to work.

 var navBarDiv = document.getElementById("navbar"); var contentDiv = document.getElementById("content"); var navBarList = navBarDiv.getElementsByTagName("ul"); // Attach click listeners for each of the nav links. for (var i = 0; i < navBarList.length; i++) { var navBarItems = navBarList[i].getElementsByTagName("li"); for (var j = 0; j < navBarItems.length; j++) { navBarItems[j].addEventListener('click', function (e) { e.preventDefault(); var pageURL = this.attributes['href'].value; GetFileDoc(pageURL, function (doc) { contentDiv.innerHTML = doc.getElementById("content").innerHTML; }); }); } } 

 <div id="navbar"> <ul> <li><a href="\\" class="active">Homepage</a></li> <li><a href="pages/about.html">About Us</a></li> <li><a href="#">Gallery</a></li> <li><a href="pages/contact.html">Contact Us</a></li> </ul> </div> 

Answer 1

This appears to be the problem:

var pageURL = this.attributes['href'].value;

You're adding the click handler to the li element, not the a element. So there is no href attribute. I imagine there are two options:

1. Drill into the element further to get the href of the child a element, or
2. Add the click handler to the a element instead

For the first option, you might do something like this instead:

var pageURL = this.getElementsByTagName("a")[0].attributes['href'].value;

You'd want to put in some error checking of course, unless you're very confident that there will always be that first a element that you want.

For the second option, you might just modify what you're looping over. Perhaps something like this:

var navBarItems = navBarList[i].getElementsByTagName("a");

Assuming there are no other a elements in the hierarchy that you don't want to use for this.

Answer 2

Try with

1. a tag is the children of li so you need use querySelector for target the child element
2. And simply use with element.href for getting href value

 var navBarDiv = document.getElementById("navbar"); var contentDiv = document.getElementById("content"); var navBarList = navBarDiv.getElementsByTagName("ul"); for (var i = 0; i < navBarList.length; i++) { var navBarItems = navBarList[i].getElementsByTagName("li"); for (var j = 0; j < navBarItems.length; j++) { navBarItems[j].addEventListener('click', function(e) { e.preventDefault(); var pageURL = this.querySelector('a').href; console.log(pageURL) //GetFileDoc(pageURL, function(doc) { //contentDiv.innerHTML = doc.getElementById("content").innerHTML; // }); }); } } 

 <div id="navbar"> <ul> <li><a href="\\" class="active">Homepage</a></li> <li><a href="pages/about.html">About Us</a></li> <li><a href="#">Gallery</a></li> <li><a href="pages/contact.html">Contact Us</a></li> </ul> </div> 

Answer 3

You are adding event to each li in the list. According to the rest of the code, espscialy the line this.attributes['href'].value you expect to have link element loaded. You can load all the link elements instead right away by using

navBarList[i].querySelectorAll("a");

which gives you all the inner links.

Answer 4

Try this one:

var navBarDiv = document.getElementById("navbar");
var contentDiv = document.getElementById("content");

var navBarLinks = navBarDiv.getElementsByTagName("a");

// Attach click listeners for each of the nav links.
for (var i = 0; i < navBarLinks.length; i++) {


    navBarLinks[i].addEventListener('click', function (e) {
        e.preventDefault();

        var pageURL = this.attributes['href'].value;

        GetFileDoc(pageURL, function (doc) {
            contentDiv.innerHTML = doc.getElementById("content").innerHTML;
        });
    });
}

}

It's nearly the same except I filter directly to the anchor-tags and then there is a href attribute.

Answer 5

Without using ES6

 Array.prototype.slice.call(document.querySelectorAll('#navbar ul li a')).map(function(item) { item.addEventListener('click', function(e) { e.preventDefault(); console.log("href", e.target.href); }); }); 

 <div id="navbar"> <ul> <li><a href="\\" class="active">Homepage</a></li> <li><a href="pages/about.html">About Us</a></li> <li><a href="#">Gallery</a></li> <li><a href="pages/contact.html">Contact Us</a></li> </ul> </div> 

Using ES6

 [...document.querySelectorAll('#navbar ul li a')] .map((item) => { item.addEventListener('click', (e) => { e.preventDefault(); console.log("href", e.target.href); }); }); 

 <div id="navbar"> <ul> <li><a href="\\" class="active">Homepage</a></li> <li><a href="pages/about.html">About Us</a></li> <li><a href="#">Gallery</a></li> <li><a href="pages/contact.html">Contact Us</a></li> </ul> </div> 

jQuery

 jQuery('#navbar ul li').click(function() { console.log("href", $(this).attr('href')) }); 

Answer 6

Please try this code

  var navBarDiv = document.getElementById("navbar");
  var contentDiv = document.getElementById("content");

  var navBarList = navBarDiv.getElementsByTagName("ul");

  // Attach click listeners for each of the nav links.
  for (var i = 0; i < navBarList.length; i++) {

      var navBarItems = navBarList[i].getElementsByTagName("li");
      for (var j = 0; j < navBarItems.length; j++) {

          navBarItems[j].addEventListener('click', function (e) {
              e.preventDefault();
                        var pageURL = this.getElementsByTagName('a')[0].href;
              alert(pageURL);
               GetFileDoc(pageURL, function (doc) {
                 contentDiv.innerHTML = doc.getElementById("content").innerHTML;
               });
          });
      }
  }