Warum kann ich xx [this.index] .style.display nicht verwenden? es heißt "Ich kann die Eigenschaft 'style' von undefinedbtn nicht lesen"

Question

Ich möchte xx [this.index] in einer Schleife machen, damit jede einen Index hat und wenn ich dann auf eine Schaltfläche klicke, würde sich der Hintergrund der Schaltfläche drehen zu gelbe Farbe & der Div-Block würde die Wörter zur gleichen Zeit ändern. warum es nicht funktioniert? Ich habe gesehen, dass andere Leute so gut arbeiten. wie kann ich? Danke vielmals!

hier ist mein JSFiddle: http://jsfiddle.net/QCxwr/7

window.onload=function() 
    { 
     var btn = document.getElementsByTagName('input'); 
     var div = document.getElementsByName('div'); 

     for(var i=0;i<btn.length;i++) { 
      btn[i].index = i; 
      btn[i].onclick=function() { 
       for(var i=0;i<btn.length;i++) { 
        btn[i].className = ''; 
        div[i].style.display='none'; 
       } 
       this.className = 'active'; 
       div[this.index].style.display = 'block'; 
      }; 
     } 
    }; 

Answer 1

Bitte die aktualisierte Javascript-Code finden. Ihr DIVs-Array ist 0, wenn Sie mit "getElementsByName" abrufen.

window.onload=function() 
     { 
      var btn = document.getElementsByTagName('input'); 
      var div = document.getElementsByTagName('div'); 

      for(var i=0;i<btn.length;i++) { 
       btn[i].index = i;alert 
       btn[i].onclick=function() {     
        for(var i=0;i<btn.length;i++) { 
         btn[i].className = ''; 
         div[i].style.display='none'; 
        } 
        this.className = 'active'; 
        div[this.index].style.display = 'block'; 
       }; 
      } 
     }; 

Answer 2

this hier zum Fenster beziehen. Sofern Sie keinen Eigenschaftsindex auf das Objektfenster legen (wirklich nicht empfohlen), wird dies nicht funktionieren.

Also, wenn diese Funktion in einem Verfahren auf einem Objekt ausgeführt wird, werden Sie den klassischen Trick zu tun haben:

var me = this; 
window.onload=function(){ 
    ... 
    div[me.index].style.display = 'block'; 
} 

Answer 3

Ihre DIV Array leer ist. Meinen Sie

getElementsByTagName 

statt

getElementsByName 

zu verwenden, wenn die DIVs Rückkehr?

Auch Sie sollten die Array-Länge vor dem Zugriff überprüfen.

Aktualisiert Code http://jsfiddle.net/QCxwr/9/