3

我刚刚开始学习本机 javascript，我正在尝试编写一个简单的脚本，该脚本将显示一个警报窗口，显示每个<p></p>元素中包含的文本。

我在下面发布代码。请让我知道我做错了什么

function show(){
  var x = document.getElementsByTagName('p');
  for(i=0;i<x.length;i++) {
    x[i].onclick=function(){
      alert(x[i].innerText);
    }
  }
}

show()

HTML 如下：

<p>Blackberry</p>
<p>Strawberry</p>
<p>Raspberry</p>
4

7 回答 7

3

您在回调中引用了一个未定义的对象，请使用：

alert(this.innerText || this.textContent);

反而...

编辑：正如@Sarfraz所指出的，检查 innerText 或 textContent 属性以确保跨浏览器兼容性。

PS Check 也是show();在加载引用的 DOM 时调用的，而不是之前；）

于 2012-04-18T08:12:06.823 回答
2

您只需要调用 show onload - 例如

window.onload=show;

并更改x[i]为thisonclick -所有浏览器都不支持innerText

我会做这个DEMO

window.onload=function(){
  var x = document.getElementsByTagName('p');
  for(var i=0;i<x.length;i++) {
    x[i].onclick=function(){
      alert(this.innerHTML); // supported by more browsers than innerText
    }
  }
}
于 2012-04-18T08:13:14.337 回答
1

您需要确保i函数内部的正确范围。
您还需要使用innerHTML而不是innerText.

function show() {
    var x = document.getElementsByTagName('p');
    for (var i = 0; i < x.length; i++) {
        (function(i) {
            x[i].onclick = function () {
                alert(x[i].innerHTML);
            }
        })(i);
    }
}

由于onclick处理程序内部this绑定到元素，因此您还可以避免闭包问题和所有问题i：

function show() {
    var x = document.getElementsByTagName('p');
    for (var i = 0; i < x.length; i++) {
        x[i].onclick = function() {
            alert(this.innerHTML);
        }
    }
}
于 2012-04-18T08:13:28.210 回答
1

我猜你<script>在<head>. 这通常会失败，因为 DOM 没有完全加载。

<html>
 <head>
  <script>
  function show(){....}
  show(); // don't do this 
  </script>
 </head>
 <body>
  <p>Blackberry</p>
  <p>Strawberry</p>
  <p>Raspberry</p>
 </body>
</html>

最好使用window.onload = show;or window.addEventListener('load',show);。

但是，x[i]是一个局部变量。它在节目之外不为人所知，甚至在您的匿名功能中也不为人所知。所以你必须创建一个闭包或使用this.innerHTML.

所以要么使用

function show(){
   var el = document.getElementsByTagName('p');
   for(var i = 0; i < el.lenght; ++i){
       el[i].onclick = function(e){
           alert(this.innerHTML);
       }
   }
}
window.onload = show;

或者

function show(){
   var el = document.getElementsByTagName('p');
   for(var i = 0; i < el.lenght; ++i){
       el[i].onclick = (function(element){
           return function(e){
               alert(element.innerHTML);
           };
       })(el[i]);
   }
}
window.onload = show;

也可以看看：

于 2012-04-18T08:13:52.980 回答
1

您需要的是闭包，否则 any <p>，在单击时不会返回任何内容，因为迭代后i会变成x.length + 1，因此您在尝试访问时尝试访问不存在的元素

x[i].innerText

将您的代码更改为：

function show(){

   var x = document.getElementsByTagName('p');

   for(var i=0;i<x.length;i++) {
      x[i].onclick=function(i){
          return function() {
              alert(x[i].innerHTML); // alternatively you can also do this.innerHTML without closure, I just wanna introduce you to this concept
          }
       }(i);
   }


}

show()​

http://jsfiddle.net/3xYtF/11/

或者，您可以更改x[i].innerText为this.innerText无需使用闭包，但我认为这是介绍闭包概念的好机会:)。同样正如另一条评论中指出的那样，.innerText并不是真正的跨浏览器，请使用innerText || textContent

于 2012-04-18T08:18:30.320 回答
0

我认为在页面完全加载之前show()正在运行。尝试从事件中调用该函数，看看是否有帮助。onload

<body onload='show();'>

于 2012-04-18T09:12:05.553 回答
0

问题是，每当执行 click 处理程序时，它总是指向 i 的最后一个值。因此，根据您的示例，您单击的任何段落元素都将始终看到“Raspberry”。

在不使用任何复杂闭包（占用内存）的情况下解决此问题的最简洁方法是使用上下文标识符“this”，它将指向被单击的元素。

函数显示（）{

var x = document.getElementsByTagName('p');

for(i=0;i<x.length;i++){

    x[i].onclick=function(){

        alert(this.innerText);

    }

}

}

节目（）

于 2012-04-18T08:25:56.957 回答