"Document.getElementByClass ist keine Funktion"

Ich versuche, eine Funktion onclickeiner beliebigen Taste mit auszuführen class="stopMusic". Ich erhalte eine Fehlermeldung in Firebug

document.getElementByClass ist keine Funktion

Hier ist mein Code:

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

Sie meinten wahrscheinlich document.getElementsByClassName()(und nahmen dann das erste Element aus der resultierenden Knotenliste):

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

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

Möglicherweise wird der Fehler weiterhin angezeigt

document.getElementsByClassName ist keine Funktion

In älteren Browsern können Sie jedoch eine Fallback-Implementierung bereitstellen, wenn Sie diese älteren Browser unterstützen müssen.

Wie andere bereits gesagt haben, verwenden Sie nicht den richtigen Funktionsnamen und er ist nicht in allen Browsern universell vorhanden.

Wenn Sie etwas anderes als ein Element mit einer ID mit browserübergreifend abrufen müssen document.getElementById(), würde ich Ihnen dringend empfehlen, eine Bibliothek zu erwerben, die CSS3-Selektoren in allen Browsern unterstützt. Dies spart Ihnen enorm viel Entwicklungszeit, Tests und Fehlerbehebung. Am einfachsten ist es, nur jQuery zu verwenden, da es so weit verbreitet ist, über eine hervorragende Dokumentation verfügt, über einen kostenlosen CDN-Zugang verfügt und eine hervorragende Community von Mitarbeitern dahinter steht, um Fragen zu beantworten. Wenn das mehr zu sein scheint als Sie brauchen, können Sie Sizzle erhalten, das nur eine Selektorbibliothek ist (es ist eigentlich die Selektor-Engine in jQuery und anderen). Ich habe es alleine in anderen Projekten verwendet und es ist einfach, produktiv und klein.

Wenn Sie mehrere Knoten gleichzeitig auswählen möchten, können Sie dies auf viele verschiedene Arten tun. Wenn Sie ihnen alle dieselbe Klasse geben, können Sie dies tun mit:

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

und es wird eine Liste von Knoten zurückgegeben, die diesen Klassennamen haben.

In Sizzle wäre es das:

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

In jQuery wäre dies:

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

Sowohl in Sizzle als auch in jQuery können Sie mehrere Klassennamen wie folgt in den Selektor einfügen und viel kompliziertere und leistungsfähigere Selektoren verwenden:

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

Bevor Sie mit einer weiteren Fehlerprüfung beginnen, überprüfen Sie bitte zunächst, ob dies der Fall ist

document.getElement s ByClassName () selbst.

Überprüfen Sie die getElement s und nicht getElement

Es sollte sein getElementsByClassNameund nicht getElementByClass. Siehe dies - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Beachten Sie, dass einige Browser / Versionen dies möglicherweise nicht unterstützen.

document.querySelectorAll funktioniert ziemlich gut und ermöglicht es Ihnen, Ihre Auswahl weiter einzugrenzen.

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

Wenn Sie es falsch geschrieben haben, sollte es "getElementsByClassName" sein.

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 - Gibt einen Stapel von Knoten mit mehr als einem Element zurück, da CLASS-Attribute verwendet werden, um mehreren Objekten zuzuweisen ...

    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

Das getElementByClassexistiert nicht, wahrscheinlich möchten Sie verwenden getElementsByClassName. Sie können jedoch einen alternativen Ansatz verwenden (verwendet in Angular / Vue / React ... -Vorlagen).

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'>

Wenn Sie diesen "getElementByClassName" geschrieben haben, wird der Fehler "document.getElementByClass ist keine Funktion" angezeigt. Um diesen Fehler zu beheben, schreiben Sie einfach "getElementsByClassName". Weil es Elemente sein sollte, nicht Elemente.