getelementsbyclass - javascript get elements by classname

"Document.getElementByClass no es una función"

Question

Estoy tratando de ejecutar una función enHaga clic en 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 = "";
};

Answer 1

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

document.getElement s ByClassName () en sí.

compruebe dos veces su getElement s y no getElement

Answer 2

Como han dicho otros, no estás usando el nombre correcto de la función y no existe unívocamente en todos los navegadores.

Si necesita realizar una búsqueda entre navegadores de cualquier elemento que no sea un elemento con una identificación con document.getElementById() , le sugiero encarecidamente 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á ampliamente disponible, tiene una excelente documentación, tiene acceso gratuito a CDN y cuenta con una excelente comunidad de personas detrás para responder preguntas. Si parece más de lo que necesita, puede obtener Sizzle que es solo una biblioteca de selector (en realidad es el motor de selección 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 diferentes maneras. Si les das a todos la misma clase, puedes hacer eso 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, puedes poner múltiples nombres de clase en el selector como este 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
});

Answer 3

Debe ser getElementsByClassName , y no getElementByClass . Ver esto - https://developer.mozilla.org/en/DOM/document.getElementsByClassName .

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

Answer 4

Probablemente quiso 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 obtener el error

document.getElementsByClassName no es una función

en navegadores más antiguos, en cuyo caso puede proporcionar una implementación alternativa si necesita admitir navegadores más antiguos.

Answer 5

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

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

Answer 6

 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