Geek asks and answers

Please help me with this simple script.

I just started learning my own javascript, and I'm trying to write a simple script that displays a warning window containing the text contained in each element <p></p>.

I am posting the code below. Please let me know what I am doing wrong.

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

show()

HTML below:

<p>Blackberry</p>
<p>Strawberry</p>
<p>Raspberry</p>
+3
source share
7 answers

You are referencing an undefined object inside your callback, use:

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

instead...

edit : as pointed out by @Sarfraz check both the innerText and textContent properties for compatibility between browsers.

PS Also check what show();is called when the DOM link is loaded, not earlier;)

+3

show onload -

window.onload=show;

x[i] this onclick - 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
    }
  }
}
+2

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 alltogether:

function show() {
    var x = document.getElementsByTagName('p');
    for (var i = 0; i < x.length; i++) {
        x[i].onclick = function() {
            alert(this.innerHTML);
        }
    }
}
+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;

. :

+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 crossbrowser, innerText || textContent

+1

, , , i. , , , "" .

, - ( ), " ", , .

function show() {

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

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

    x[i].onclick=function(){

        alert(this.innerText);

    }

}

}

()

0

, show() , . onload , .

<body onload='show();'>

0

More articles:


All Articles