“le document.getElementByClass n'est pas une fonction”

Je suis en train d'exécuter une fonction onclick d'un bouton avec class="stopMusic". J'obtiens 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 = "";
    };
InformationsquelleAutor user547794 | 2011-09-20
  1. 223

    Vous signifiait probablement document.getElementsByClassName() (et puis de saisir le premier élément résultant de la liste des nœuds):

    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 obtenir l'erreur

    document.getElementsByClassName n'est pas une fonction

    dans les navigateurs plus anciens, bien que, dans ce cas, vous pouvez fournir une solution de secours mise en œuvre si vous avez besoin à l'appui de ces anciens navigateurs.

    • Merci , ça a du sens. Est la fonction de sélection de tous les noms de classe qui est plus navigateur compatible? Ou est-il possible de sélectionner une plage pour le tableau de nœuds? (ie. 0-100)?
    • Pas comme un construit-dans la mise en œuvre. Vous devrez peut-être utiliser une bibliothèque comme Mootools ou jQuery (qui rend super facile).
    • pour un plus légers que l'bibliothèque jQuery pour tout ne sélections, vous pouvez utiliser Grésillement, qui est ce que les sélecteurs de jQuery sont basés hors de.
    • À partir de caniuse.com/#feat=getelementsbyclassname, il semble que seuls IE8 n'est pas prise en charge de cette méthode.
    • Tout à fait, mais c'était une assez grosse affaire, à l'époque, ce n'était affiché.
    • Totalement. Juste pensé que je mettrais à jour pour ceux qui à l'avenir 🙂

    InformationsquelleAutor BoltClock
  2. 14

    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 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
});
    InformationsquelleAutor jfriend00
  3. 10

    Avant de sauter dans toute la vérification des erreurs, veuillez d'abord vérifier si son

    document.getElementsByClassName() elle-même.

    vérifier ses getElements et pas getElement

    InformationsquelleAutor neo
  4. 8

    Il devrait être getElementsByClassName, et pas getElementByClass. Voir ce - https://developer.mozilla.org/en/DOM/document.getElementsByClassName.

    Noter que certains navigateurs/versions peuvent ne pas supporter cette.

    InformationsquelleAutor Saket
  5. 0

    vous épeautre à tort, il doit être " getElementsByClassName ",

    var objs = document.getElementsByClassName("stopButton");
var stopMusicExt = objs[0]; //retrieve the first node in the stack

//your remaining function goes down here.. 
document['player'].stopMusicExt(ta.value);
ta.value = "";

    document.getElementsByClassName - retourne une pile de nœuds avec plus d'un élément, puisque les attributs de CLASSE sont utilisées pour attribuer à plusieurs objets...

    InformationsquelleAutor Andaeiii
  6. 0

    La getElementByClass n'existe pas, probablement que vous souhaitez utiliser getElementsByClassName. Cependant, vous pouvez utiliser l'approche alternative (utilisé dans angulaire/vue/réagir... modèles)

    JS:

    function stop(ta) {
  console.log(ta.value) //document['player'].stopMusicExt(ta.value);
  ta.value='';
}

    HTML:

    <input type="button" onclick="stop(this)" class="stopMusic" value='Stop 1'>
<input type="button" onclick="stop(this)" class="stopMusic" value='Stop 2'>

    InformationsquelleAutor Kamil Kiełczewski
  7. -1
        enter code here
var stopMusicExt = document.getElementByClass("stopButton").value;
    stopButton.onclick = function() {
        var ta = document.getElementByClass("stopButton");
        document['player'].stopMusicExt(ta.value);
        ta.value = "";
    };


//.value will hold all data from class stopButton
    InformationsquelleAutor Gajender Singh
  8. -1

    document.querySelectorAll fonctionne assez bien et vous permettra de continuer à affiner votre sélection.

    https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

    InformationsquelleAutor KuN