“Document.getElementByClass non è una funzione”

Sto cercando di eseguire una funzione onClick di qualsiasi pulsante con class="stopMusic" . Sto ottenendo 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 prendi il primo elemento dall’elenco dei nodes 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 è ansible fornire un’implementazione di fallback se è necessario supportare tali browser meno recenti.

Come altri hanno già detto, non stai usando il giusto nome di funzione e non esiste in modo univoco in tutti i browser.

Se devi eseguire il recupero da più browser di qualcosa di diverso da un elemento con un ID con document.getElementById() , ti suggerisco caldamente di ottenere una libreria che supporti i selettori CSS3 su tutti i browser. Ti farà risparmiare una grande quantità di tempo di sviluppo, test e risoluzione dei bug. La cosa più semplice da fare è usare solo jQuery perché è ampiamente disponibile, ha una documentazione eccellente, ha accesso CDN gratuito e ha un’eccellente comunità di persone dietro di esso 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 piccolo.

Se si desidera selezionare più nodes contemporaneamente, è ansible farlo in molti modi diversi. Se dai loro tutti la stessa class, 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à una lista di nodes che hanno quel nome di class.

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 }); 

Sia in Sizzle che in jQuery, puoi inserire più nomi di classi 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 }); 

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

Nota che alcuni browser / versioni potrebbero non supportare questo.

Prima di saltare a qualsiasi altro controllo degli errori, per prima cosa controlla se è

document.getElement s ByClassName () stesso.

ricontrollare i suoi getElement e non getElement

  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 

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

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