1

I am trying to write a very simple script and can't figure out the issue there. the function of the script should be displaying the inner html of each list element but it keeps showing only the last one which is 'Orange'

here is what i have in my html:

<ul id='mylist'>
  <li>Red</li>
  <li>Green</li>
  <li>Black</li>
  <li>Orange</li>
</ul>

and below is that script:

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for (i = 0; i < z.length; i++) {    
    var res = z[i].innerHTML;
    z[i].setAttribute('onclick','alert(res)');
}

I probably need to add a closure here but i am not sure if i really need to and how to add it

4

5 回答 5

2

尝试这个：

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for (var i = 0; i < z.length; i++) {
    (function(i) {
        var res = z[i].innerHTML;
        z[i].onclick = function() {
            alert(res)
        };
    })(i);
}​

http://jsfiddle.net/sssonline2/UYEa9/

于 2012-05-09T12:08:07.423 回答
1

Try this by making res as a identifier instead of string string constant Demo on JsFiddle

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for(i=0;i<z.length;i++){
      var res = z[i].innerHTML;  
      z[i].setAttribute('onclick',"alert('"+res+"');");

}​
于 2012-05-09T12:12:10.507 回答
0

一个简单的解决方案

HTML

<ul id="test-list">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

JavaScript

var x = document.getElementById( 'test-list' );
var li = x.getElementsByTagName( 'li' );

for( var i = 0; i < li.length; i++ ) {
    li[i].onclick = function() {
        alert( this.innerHTML );
    }
}
于 2012-05-09T12:15:06.230 回答
0

这可以通过另一种方式完成

var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {  
        lis[i].addEventListener('click', 
            function() {
                console.log('asd');
                alert(this.innerHTML);
            }
            , false);
}

在 JSFiddle 上试试

根据 MDN，使用 addEventListener 是当前推荐的方法。

于 2012-05-09T12:10:25.550 回答
0

首先，确保你有一个结束</ul>标签：

<ul id="test-list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

其次，使用onclickDOM 对象的属性或addEventListener()：

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for(i=0;i<z.length;i++){
  z[i].onclick = function() {
    alert(this.innerHTML); // In this scope, "this"
  };                      // means the element that was clicked
}

或者

var x = document.getElementById('mylist');
var z = x.getElementsByTagName('li');

for(i=0;i<z.length;i++){
  z[i].addEventListener('click', function() {
    alert(this.innerHTML); // In this scope, "this"
  });                      // means the element that was clicked
}

如果必须使用setAttribute()，则需要非常小心范围。的最后一个值res是orange，这就是浏览器记住的。当您单击该元素时，浏览器会检查它的当前值res并发出警报。如果你使用

setAttribute('onclick', 'alert"' + res '")');

它将res在循环的当前迭代中获取值for并将其注入到字符串中。

于 2015-12-22T19:47:26.237 回答