getElementsByClassName no funciona en Firefox - javascript

Escribí este guión para un sistema de calificación de 5 estrellas.hecho y hace que las estrellas se enciendan cuando el usuario se desplaza sobre ellas, por ejemplo: si un usuario se desplaza sobre la tercera estrella, esta muestra la imagen de la estrella encendida y las dos primeras. El script funciona en todos los navegadores más nuevos, excepto FireFox. He atormentado mi cerebro sobre esto por un tiempo y no puedo entender por qué no funciona en Firefox. Cualquier ayuda es apreciada. Además, solo me interesan las respuestas sobre Javascript sin formato, no JQuery o cualquier otro marco. Gracias un montón.

function btnSwap(){
var myBtns = document.getElementsByClassName("btns");
for(i=0; i<myBtns.length; i++){
var elem = document.getElementById(myBtns[i].id);
elem.src = "images/"+"starNorm.png";
elem.onmouseover = btnOver;
elem.onmouseout = btnOut;
function btnOver(){
var lit = document.getElementById(this.id);
if(lit.id == "rb1"){
lit.src = "images/"+"starOver.png";
}
if(lit.id == "rb2"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
}
if(lit.id == "rb3"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
document.getElementById("rb2").src = "images/"+"starOver.png";
}
if(lit.id == "rb4"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
document.getElementById("rb2").src = "images/"+"starOver.png";
document.getElementById("rb3").src = "images/"+"starOver.png";
}
if(lit.id == "rb5"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
document.getElementById("rb2").src = "images/"+"starOver.png";
document.getElementById("rb3").src = "images/"+"starOver.png";
document.getElementById("rb4").src = "images/"+"starOver.png";
}

}

function btnOut(){
var lit = document.getElementById(this.id);
if(lit.id == "rb1"){
lit.src = "images/"+"starNorm.png";
}
if(lit.id == "rb2"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
}
if(lit.id == "rb3"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
document.getElementById("rb2").src = "images/"+"starNorm.png";
}
if(lit.id == "rb4"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
document.getElementById("rb2").src = "images/"+"starNorm.png";
document.getElementById("rb3").src = "images/"+"starNorm.png";
}
if(lit.id == "rb5"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
document.getElementById("rb2").src = "images/"+"starNorm.png";
document.getElementById("rb3").src = "images/"+"starNorm.png";
document.getElementById("rb4").src = "images/"+"starNorm.png";
}


}
}

}

Respuestas

1 para la respuesta № 1

No ponga las declaraciones de función dentro de la for lazo.

function btnSwap(){

var myBtns = document.getElementsByClassName("btns");

// begin loop
for(i=0; i<myBtns.length; i++){
var elem = document.getElementById(myBtns[i].id);
elem.src = "images/"+"starNorm.png";
elem.onmouseover = btnOver;
elem.onmouseout = btnOut;
}

// outside the loop.. now function declarations.

function btnOver(){
var lit = document.getElementById(this.id);
if(lit.id == "rb1"){
lit.src = "images/"+"starOver.png";
}
if(lit.id == "rb2"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
}
if(lit.id == "rb3"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
document.getElementById("rb2").src = "images/"+"starOver.png";
}
if(lit.id == "rb4"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
document.getElementById("rb2").src = "images/"+"starOver.png";
document.getElementById("rb3").src = "images/"+"starOver.png";
}
if(lit.id == "rb5"){
lit.src = "images/"+"starOver.png";
document.getElementById("rb1").src = "images/"+"starOver.png";
document.getElementById("rb2").src = "images/"+"starOver.png";
document.getElementById("rb3").src = "images/"+"starOver.png";
document.getElementById("rb4").src = "images/"+"starOver.png";
}

}

function btnOut(){
var lit = document.getElementById(this.id);
if(lit.id == "rb1"){
lit.src = "images/"+"starNorm.png";
}
if(lit.id == "rb2"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
}
if(lit.id == "rb3"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
document.getElementById("rb2").src = "images/"+"starNorm.png";
}
if(lit.id == "rb4"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
document.getElementById("rb2").src = "images/"+"starNorm.png";
document.getElementById("rb3").src = "images/"+"starNorm.png";
}
if(lit.id == "rb5"){
lit.src = "images/"+"starNorm.png";
document.getElementById("rb1").src = "images/"+"starNorm.png";
document.getElementById("rb2").src = "images/"+"starNorm.png";
document.getElementById("rb3").src = "images/"+"starNorm.png";
document.getElementById("rb4").src = "images/"+"starNorm.png";
}

}
}

---

Explicación

Firefox respeta los bloques de códigos condicionales que envuelven las declaraciones de funciones. Por ejemplo:

if (true) {
function a() { return 1; }
} else {
function a() { return 2; }
}
a(); // => Chrome: 2, Firefox: 1

Desde un for bloque de código podría no ejecutarse, Firefox intenta respetar la naturaleza condicional de la for lazo. Puedes ver esto más directamente en un while (false) lazo.

while(false) {
function a() { return "a"; }
}
a(); // => Chrome: "a", Firefox: Throws an error.

En Firefox, a Nunca se define porque la condición nunca tiene éxito.

Sin embargo, si hay un bloque de código que siempre se ejecutará sin importar la condición, la definición de la función será ser levantado Podemos ver esto en una do...while lazo.

var x = a;
do {
function a() { return "a"; }
} while(false);
x(); // => Both browsers: "a"

No hay problema para izar aquí porque un do...while Bloque de código siempre está garantizado para ejecutar.

---

Además, ¿hay alguna razón por la que estás haciendo cosas como esta?

var elem = document.getElementById(myBtns[i].id)

No hay necesidad de obtener un elemento por ID si ya lo tiene. Solo use

var elem = myBtns[i];

---