"Document.getElementByClass non è una funzione"

Sto cercando di eseguire una funzione onclickdi qualsiasi pulsante con class="stopMusic". Ricevo un errore in Firebug

document.getElementByClass non è una funzione

Ecco il mio codice:

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

Probabilmente intendevi document.getElementsByClassName()(e quindi afferrando il primo elemento dall'elenco dei nodi risultante):

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

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

Potresti ancora ricevere l'errore

document.getElementsByClassName non è una funzione

nei browser più vecchi, tuttavia, nel qual caso è possibile fornire un'implementazione di fallback se è necessario supportare quei browser più vecchi.

Come altri hanno già detto, non stai usando il nome della funzione corretta e non esiste universalmente in tutti i browser.

Se è necessario eseguire il recupero tra browser di qualsiasi cosa diversa da un elemento con un ID con document.getElementById(), quindi suggerirei vivamente di ottenere una libreria che supporti i selettori CSS3 in tutti i browser. Ti farà risparmiare una grande quantità di tempo di sviluppo, test e correzione di errori. La cosa più semplice da fare è usare jQuery perché è così ampiamente disponibile, ha un'eccellente documentazione, ha accesso gratuito alla CDN e ha un'eccellente comunità di persone dietro di essa per rispondere alle domande. Se questo sembra più del necessario, puoi ottenere Sizzle che è solo una libreria di selettori (in realtà è il motore di selezione all'interno di jQuery e altri). L'ho usato da solo in altri progetti ed è facile, produttivo e di piccole dimensioni.

Se si desidera selezionare più nodi contemporaneamente, è possibile farlo in molti modi diversi. Se dai loro tutti la stessa classe, puoi farlo con:

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

e restituirà un elenco di nodi che hanno quel nome di classe.

In Sizzle, sarebbe questo:

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

In jQuery, sarebbe questo:

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

In Sizzle e jQuery, puoi inserire più nomi di classe nel selettore in questo modo e utilizzare selettori molto più complicati e potenti:

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

Prima di saltare a qualsiasi ulteriore controllo degli errori, controlla prima se

document.getElement s ByClassName () stesso.

controllare due volte la sua getElement s e non getElement

Dovrebbe essere getElementsByClassNamee non getElementByClass. Vedi questo - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Si noti che alcuni browser / versioni potrebbero non supportare questo.

document.querySelectorAll funziona abbastanza bene e ti consente di restringere ulteriormente la selezione.

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

l'hai scritto male, dovrebbe essere "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: restituisce una pila di nodi con più di un elemento, poiché gli attributi CLASS vengono utilizzati per assegnare a più oggetti ...

    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

Il getElementByClassnon esiste, probabilmente si desidera utilizzare getElementsByClassName. Tuttavia è possibile utilizzare un approccio alternativo (utilizzato nei modelli angolari / vue / reazioni ...)

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

Se hai scritto questo "getElementByClassName", riscontrerai questo errore "document.getElementByClass non è una funzione", quindi per superare l'errore basta scrivere "getElementsByClassName". Perché dovrebbe essere Elements non Element.