3

<p></p>ネイティブ JavaScript の学習を始めたばかりで、各要素に含まれるテキストを示す警告ウィンドウを表示する簡単なスクリプトを作成しようとしています。

以下にコードを掲載しています。私が間違っていることを教えてください

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);

代わりは...

edit : @Sarfraz が指摘するように、innerText または textContent プロパティの両方をチェックして、ブラウザー間の互換性を確保します。

PS チェックshow();は、参照された DOM がロードされる前ではなくロードされるときにも呼び出されます ;)

于 2012-04-18T08:12:06.823 に答える
2

show onload を呼び出すだけです - たとえば

window.onload=show;

onclick でに変更x[i]します - innerTextはすべてのブラウザでサポートされているわけではありませんthis

私はこのデモを行います

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

あなたが必要とするのは<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 に答える
1

関数内の適切なスコープを確保する必要がありiます。の代わりに
使用する必要もあります。innerHTMLinnerText

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;またはを使用することをお勧めします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 に答える
0

ページが完全に読み込まれる前show()に実行されていると思います。代わりにイベントから関数を呼び出してみて、それが役立つかどうかを確認してください。onload

<body onload='show();'>

于 2012-04-18T09:12:05.553 に答える
0

問題は、クリック ハンドラーが実行されるたびに、常に 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 に答える