158 votes

Javascript getElementByClass

J'essaie d'exécuter une fonction onClick de n'importe quel bouton avec class="stopMusic" Je reçois une erreur dans Firebug

document.getElementByClass n'est pas une fonction

Voici mon code:

 var stopMusicExt = document.getElementByClass("stopButton");
    stopButton.onclick = function() {
        var ta = document.getElementByClass("stopButton");
        document['player'].stopMusicExt(ta.value);
        ta.value = "";
    };
 

273voto

BoltClock Points 249668

Vous vouliez probablement dire document.getElementsByClassName() (puis prendre le premier élément de la liste de nœuds obtenue):

 var stopMusicExt = document.getElementsByClassName("stopButton")[0];

stopButton.onclick = function() {
    var ta = document.getElementsByClassName("stopButton")[0];
    document['player'].stopMusicExt(ta.value);
    ta.value = "";
};
 

Vous pouvez toujours avoir l'erreur

document.getElementsByClassName n'est pas une fonction

dans les navigateurs plus anciens, vous pouvez toutefois fournir une implémentation de secours si vous devez prendre en charge ces navigateurs plus anciens.

15voto

jfriend00 Points 152127

Comme d'autres l'ont dit, vous n'utilisez pas le bon nom de la fonction et il n'existe pas univerally dans tous les navigateurs.

Si vous avez besoin de faire de la cross-browser aller chercher de quoi que ce soit d'autre qu'un élément avec un id avec document.getElementById(), alors je suggère fortement que vous obtenez une bibliothèque qui prend en charge des sélecteurs CSS3 sur tous les navigateurs. Il vous permettra d'économiser une quantité massive de temps de développement, de test et de correction de bug. La meilleure chose à faire est de simplement utiliser jQuery parce que c'est si largement disponibles, a une excellente documentation, a gratuit CDN d'accès et dispose d'une excellente communauté de gens qui sont derrière pour répondre à des questions. Si ça semble plus que vous avez besoin, alors vous pouvez obtenir le Grésillement qui est juste un sélecteur de bibliothèque (c'est en fait le sélecteur de moteur à l'intérieur de jQuery et autres). Je l'ai utilisé par lui-même dans d'autres projets et c'est facile, plus productive et plus petites.

Si vous voulez sélectionner plusieurs nœuds à la fois, vous pouvez faire de nombreuses façons différentes. Si vous leur donnez tous la même classe, vous pouvez le faire avec:

var list = document.getElementsByClassName("myButton");
for (var i = 0; i < list.length; i++) {
    // list[i] is a node with the desired class name
}

et il sera de retour une liste de nœuds qui ont un nom de classe.

Dans Grésillement, ce serait celui-ci:

var list = Sizzle(".myButton");
for (var i = 0; i < list.length; i++) {
    // list[i] is a node with the desired class name
}

En jQuery, il serait celui-ci:

$(".myButton").each(function(index, element) {
    // element is a node with the desired class name
});

Dans les deux Grésillement et jQuery, vous pouvez mettre plusieurs noms de classe dans le sélecteur de ce genre et l'utilisation beaucoup plus compliqué et puissant sélecteurs:

$(".myButton, .myInput, .homepage.gallery, #submitButton").each(function(index, element) {
    // element is a node that matches the selector
});

10voto

Saket Points 9771

Ce devrait être getElementsByClassName , et non getElementByClass . Voir ceci - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Notez que certains navigateurs / versions peuvent ne pas supporter cela.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X