Question

我刚刚开始学习原生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>

Answer 1

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

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

，而不是...

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

PS 还要检查在加载引用的DOM时是否调用show();，而不是之前;）

Answer 2

你只需要调用show onload - 例如

window.onload=show;

所有浏览器都不支持

并将x[i]更改为this - 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
    }
  }
}

Answer 3

您需要确保在您的职能范围内正确确定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);
        }
    }
}

Answer 4

我猜您使用了<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;或window.addEventListener('load',show);。

但是，x[i]是一个局部变量。它不在show之外，甚至在你的匿名函数中都不知道。因此，您必须创建一个闭包或使用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;

另见：

Answer 5

你需要的是闭包，否则任何<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

Answer 6

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

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

function show（）{

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

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

    x[i].onclick=function(){

        alert(this.innerText);

    }

}

}

显示（）

Answer 7

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

onload

请帮我这个简单的脚本

7 个答案: