"Document.getElementByClass n'est pas une fonction"

J'essaye d'exécuter une fonction onclickde 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 = "";
    };

Vous avez probablement voulu dire document.getElementsByClassName()(puis saisir le premier élément de la liste de nœuds résultante):

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, cependant, auquel cas vous pouvez fournir une implémentation de secours si vous avez besoin de prendre en charge ces anciens navigateurs.

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

Si vous avez besoin de rechercher autre chose qu'un élément avec un identifiant document.getElementById()dans plusieurs navigateurs, je vous suggère fortement de vous procurer une bibliothèque prenant en charge les sélecteurs CSS3 sur tous les navigateurs. Cela vous fera gagner énormément de temps de développement, de tests et de correction de bogues. La chose la plus simple à faire est d'utiliser simplement jQuery car il est si largement disponible, dispose d'une excellente documentation, d'un accès CDN gratuit et d'une excellente communauté de personnes derrière lui pour répondre aux questions. Si cela semble plus que ce dont vous avez besoin, vous pouvez obtenir Sizzle qui n'est qu'une bibliothèque de sélecteurs (c'est en fait le moteur de sélection à l'intérieur de jQuery et d'autres). Je l'ai utilisé seul dans d'autres projets et c'est facile, productif et petit.

Si vous souhaitez sélectionner plusieurs nœuds à la fois, vous pouvez le faire de différentes manières. Si vous leur donnez tous le même cours, 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 renverra une liste de nœuds qui ont ce nom de classe.

Dans Sizzle, ce serait ceci:

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

Dans jQuery, ce serait ceci:

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

Dans Sizzle et jQuery, vous pouvez mettre plusieurs noms de classe dans le sélecteur comme celui-ci et utiliser des sélecteurs beaucoup plus compliqués et puissants:

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

Avant de passer à une autre vérification d'erreur, veuillez d'abord vérifier si

document.getElement s ByClassName () lui-même.

revérifier son getElement s et non getElement

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

Notez que certains navigateurs / versions peuvent ne pas prendre en charge cela.

document.querySelectorAll fonctionne plutôt bien et vous permet d'affiner davantage votre sélection.

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

vous l'avez mal orthographié, cela devrait ê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 - renvoie une pile de nœuds avec plus d'un élément, car les attributs CLASS sont utilisés pour attribuer à plusieurs objets ...

    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

Le getElementByClassn'existe pas, vous souhaitez probablement l'utiliser getElementsByClassName. Cependant, vous pouvez utiliser une approche alternative (utilisée dans les modèles angular / vue / react ...)

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

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

Si vous avez écrit ce "getElementByClassName" alors vous rencontrerez cette erreur "document.getElementByClass n'est pas une fonction" donc pour surmonter cette erreur, écrivez simplement "getElementsByClassName". Parce qu'il devrait s'agir d'éléments et non d'élément.