"Document.getElementByClass no es una función"

Estoy tratando de ejecutar una función onclickde cualquier botón con class="stopMusic". Recibo un error en Firebug

document.getElementByClass no es una función

Aquí está mi código:

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

Probablemente quisiste decir document.getElementsByClassName()(y luego tomar el primer elemento de la lista de nodos resultante):

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

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

Aún puede recibir el error

document.getElementsByClassName no es una función

sin embargo, en navegadores antiguos, en cuyo caso puede proporcionar una implementación alternativa si necesita admitir esos navegadores antiguos.

Como han dicho otros, no está utilizando el nombre de función correcto y no existe de manera universal en todos los navegadores.

Si necesita realizar una búsqueda cruzada en el navegador de cualquier elemento que no sea un elemento con una identificación document.getElementById(), le sugiero que obtenga una biblioteca que admita selectores CSS3 en todos los navegadores. Le ahorrará una gran cantidad de tiempo de desarrollo, pruebas y corrección de errores. Lo más fácil es usar jQuery porque está muy disponible, tiene excelente documentación, tiene acceso gratuito a CDN y tiene una excelente comunidad de personas detrás para responder preguntas. Si eso parece más de lo que necesita, puede obtener Sizzle, que es solo una biblioteca de selector (en realidad es el motor de selector dentro de jQuery y otros). Lo he usado solo en otros proyectos y es fácil, productivo y pequeño.

Si desea seleccionar varios nodos a la vez, puede hacerlo de muchas maneras diferentes. Si les das a todos la misma clase, puedes hacerlo con:

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

y devolverá una lista de nodos que tienen ese nombre de clase.

En Sizzle, sería esto:

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

En jQuery, sería esto:

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

Tanto en Sizzle como en jQuery, puede poner varios nombres de clase en el selector de esta manera y usar selectores mucho más complicados y potentes:

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

Antes de saltar a cualquier verificación de error adicional, primero verifique si es

document.getElement s ByClassName () en sí.

verifique dos veces getElement sy no getElement

Debería ser getElementsByClassName, y no getElementByClass. Vea esto: https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

Tenga en cuenta que algunos navegadores / versiones pueden no ser compatibles con esto.

document.querySelectorAll funciona bastante bien y le permite reducir aún más su selección.

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

lo deletreó mal, debería 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: devuelve una pila de nodos con más de un elemento, ya que los atributos CLASS se utilizan para asignar a múltiples 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

El getElementByClassno existe, probablemente quieras usarlo getElementsByClassName. Sin embargo, puede utilizar un enfoque alternativo (utilizado en plantillas angulares / 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'>

Si escribió este "getElementByClassName", se encontrará con este error "document.getElementByClass no es una función", así que para superar ese error simplemente escriba "getElementsByClassName". Porque debería ser Elementos, no Elemento.