„Document.getElementByClass nie jest funkcją”

Próbuję uruchomić funkcję onclickdowolnego przycisku za pomocą class="stopMusic". Otrzymuję błąd w Firebug

document.getElementByClass nie jest funkcją

Oto mój kod:

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

Prawdopodobnie miałeś na myśli document.getElementsByClassName()(a następnie zabranie pierwszego elementu z wynikowej listy węzłów):

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

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

Nadal możesz otrzymać błąd

document.getElementsByClassName nie jest funkcją

w starszych przeglądarkach, w takim przypadku możesz zapewnić implementację rezerwową, jeśli potrzebujesz obsługiwać te starsze przeglądarki.

Jak powiedzieli inni, nie używasz właściwej nazwy funkcji i nie istnieje ona uniwersalnie we wszystkich przeglądarkach.

Jeśli chcesz document.getElementById()pobrać z różnych przeglądarek coś innego niż element z identyfikatorem z , to zdecydowanie sugeruję, abyś uzyskał bibliotekę obsługującą selektory CSS3 we wszystkich przeglądarkach. Zaoszczędzi ci to ogromną ilość czasu na programowanie, testowanie i naprawianie błędów. Najłatwiej jest po prostu użyć jQuery, ponieważ jest on tak szeroko dostępny, ma doskonałą dokumentację, ma bezpłatny dostęp do CDN i ma za sobą doskonałą społeczność ludzi, którzy odpowiadają na pytania. Jeśli wydaje ci się, że więcej, niż potrzebujesz, możesz zdobyć Sizzle który jest tylko biblioteką selektorów (w rzeczywistości jest to silnik selektora wewnątrz jQuery i innych). Używałem go samodzielnie w innych projektach i jest łatwy, produktywny i mały.

Jeśli chcesz wybrać wiele węzłów jednocześnie, możesz to zrobić na wiele różnych sposobów. Jeśli dasz im wszystkim tę samą klasę, możesz to zrobić za pomocą:

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

i zwróci listę węzłów, które mają tę nazwę klasy.

W Sizzle wyglądałoby to tak:

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

W jQuery wyglądałoby to tak:

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

Zarówno w Sizzle, jak i jQuery możesz umieścić wiele nazw klas w selektorze w ten sposób i używać znacznie bardziej skomplikowanych i potężnych selektorów:

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

Przed przejściem do dalszego sprawdzania błędów, najpierw sprawdź, czy jest to plik

document.getElement s ByClassName ().

sprawdź dokładnie jego getElement s, a nie getElement

Tak powinno być getElementsByClassName, a nie getElementByClass. Zobacz - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Należy pamiętać, że niektóre przeglądarki / wersje mogą tego nie obsługiwać.

document.querySelectorAll działa całkiem nieźle i pozwala na dalsze zawężenie wyboru.

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

źle napisałeś, powinno to być "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 - zwraca stos węzłów z więcej niż jednym elementem, ponieważ atrybuty CLASS są używane do przypisywania do wielu obiektów ...

    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

getElementByClassNie istnieje, prawdopodobnie chcesz użyć getElementsByClassName. Możesz jednak użyć alternatywnego podejścia (używanego w szablonach angular / vue /ago ...)

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

Jeśli napisałeś to „getElementByClassName”, napotkasz ten błąd „document.getElementByClass nie jest funkcją”, więc aby obejść ten błąd, po prostu napisz „getElementsByClassName”. Ponieważ powinien to być element, a nie element.