"Document.getElementByClass não é uma função"

Estou tentando executar uma função onclickde qualquer botão com class="stopMusic". Estou recebendo um erro no Firebug

document.getElementByClass não é uma função

Aqui está o meu código:

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

Você provavelmente quis dizer document.getElementsByClassName()(e, em seguida, extrair o primeiro item da lista de nós resultante):

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

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

Você ainda pode receber o erro

document.getElementsByClassName não é uma função

em navegadores mais antigos, no entanto, nesse caso, você pode fornecer uma implementação de fallback se precisar oferecer suporte a esses navegadores mais antigos.

Como já foi dito, você não está usando o nome da função correto e ele não existe universalmente em todos os navegadores.

Se você precisar buscar em outro navegador, além de um elemento com um ID document.getElementById(), sugiro fortemente que você obtenha uma biblioteca que ofereça suporte a seletores CSS3 em todos os navegadores. Isso economizará uma quantidade enorme de tempo de desenvolvimento, testes e correção de erros. A coisa mais fácil a se fazer é usar o jQuery, porque é tão amplamente disponível, possui excelente documentação, acesso gratuito à CDN e tem uma excelente comunidade de pessoas por trás dele para responder a perguntas. Se isso parecer mais do que você precisa, você pode obter o Sizzle, que é apenas uma biblioteca de seletores (na verdade, é o mecanismo de seletores no jQuery e outros). Eu o usei sozinho em outros projetos e é fácil, produtivo e pequeno.

Se você deseja selecionar vários nós de uma só vez, pode fazer isso de várias maneiras diferentes. Se você der a todos a mesma classe, poderá fazer isso com:

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

e retornará uma lista de nós que possuem esse nome de classe.

No Sizzle, seria o seguinte:

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

No jQuery, seria o seguinte:

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

No Sizzle e no jQuery, você pode colocar vários nomes de classe no seletor como este e usar seletores muito mais complicados e poderosos:

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

Antes de iniciar qualquer verificação de erro adicional, verifique primeiro se

O próprio ByClassName () do document.getElement .

verifique a sua GetElement s e não GetElement

Deveria ser getElementsByClassName, e não getElementByClass. Veja isto - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Observe que alguns navegadores / versões podem não suportar isso.

document.querySelectorAll funciona muito bem e permite restringir ainda mais sua seleção.

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

você digitou errado, deve ser "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 - retorna uma pilha de nós com mais de um item, pois os atributos CLASS são usados ​​para atribuir a vários objetos ...

    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

O getElementByClassnão existe, provavelmente você deseja usar getElementsByClassName. No entanto, você pode usar uma abordagem alternativa (usada nos modelos 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'>

Se você escreveu este "getElementByClassName", encontrará o erro "document.getElementByClass não é uma função". Para superar esse erro, basta escrever "getElementsByClassName". Porque deve ser elementos e não elemento.