Wie man alle Knöpfe mit onclick Klasse oder durch Tagname mit einer anderen Seite verbindet

Question

Ich habe ein Problem, wo ich nicht scheinen kann, um alle Knöpfe auf meiner Seite zu einer anderen Seite zu verbinden, es funktioniert mit einer ID oder einem bestimmten Element zum Beispiel:. document.getElementsByTagName ("Button") [0] .onclick

Aber tun document.getElementsByTagName ("Button") Onclick (so alle Tasten) oder document.getElementsByClassName ("theButtons") tun Onclick. funktioniert nicht.

Mein JavaScript-Code:

window.onload = function(){ 
      document.getElementsByTagName("button").onclick = function() { 
      location.href = "../index.html"; 
      }; 
     }; 

<button class="theButtons">click me</button> 
<button class="theButtons">click me</button> 
<button class="theButtons">click me</button> 

Answer 1

Sie müssen durch die Sammlung von Schaltflächen in Ihrem Dokument Schleife. document.getElementsByTagName() gibt eine Auflistung aller übereinstimmenden Elemente zurück. Sie müssen also das Array durchlaufen und die onClick jedes Elements zuweisen.

window.onload = function(){ 
    var buttons = document.getElementsByTagName('button'); 
    for (var i = 0; i < buttons.length; i++) { 
     var button = buttons[i]; 
     button.onclick = function() { location.href = "../index.html"; }; 
    } 
} 

Answer 2

Eine weitere Option ist Jquery click() sehen Geige http://jsfiddle.net/85qLh41a/3/

<button class="theButtons">click me</button> 
<button class="theButtons">click me</button> 
<button class="theButtons">click me</button> 
<script> 
    $(".theButtons").click(function() { 
    location.href = '../index.html'; 
    }); 
</script> 

Oder dies funktionieren wird, um für alle Schaltfläche auf der Seite

<script> 
    $("button").click(function() { 
    location.href = '../index.html'; 
    }); 
</script> 

Answer 3

, das zu verwenden ist, weil document.getElementsByTagName wird eine Rückkehr HTMLCollection, document.getElementById gibt ein DOM-Element zurück. HTMLCollection kann keinen Ereignis-Listener hinzufügen.

können Sie versuchen:

1. Verwendung for obwohl das Array gehen Schleife, die jedem buttonclick Event-Handler registrieren.
2. verwenden Sie event bubbling. Registrieren Sie einen Ereignishandler für den Container, um das gesamte Ereignis auf seinen untergeordneten Elementen abzuhören. (Empfehlen).

Ich hoffe, das ist nützlich.