Javascript getElementsByClassName在Firefox中不工作

我为我制作的一个五星评级系统编写了这个脚本，当用户悬停在星星上时，它会使星星亮起，例如：如果用户悬停在第三颗星星上，那么这颗星星会显示亮起的星星图像以及前两颗星星。该脚本适用于除FireFox之外的所有较新浏览器。我为此绞尽脑汁已经有一段时间了，不明白为什么它不能在firefox中工作。感谢您的帮助。另外，我只对原始Javascript的响应感兴趣，而不是JQuery或任何其他框架。非常感谢

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


    }
}

函数btnSwap（）{
var myBtns=document.getElementsByClassName（'btns'）；
for（i=0；i不要将函数声明放入
for
循环中

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

    }
}

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

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

由于
for
代码块可能无法执行，Firefox会尝试尊重
for
循环的条件性质。您可以在
while（false）
循环中更直接地看到这一点

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

    }
}

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

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

在Firefox中，
a
从未定义，因为该条件从未成功

但是，如果有一个代码块，无论条件如何，它都将被执行，函数定义将被提升。我们可以在
do…while
循环中看到这一点

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

    }
}

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

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

在这里提升没有问题，因为
do…而
代码块始终保证执行


还有，你这样做有什么原因吗

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

如果已经有了元素，就不需要按id获取它。只需使用

var elem = myBtns[i];

您在Firefox中是否遇到任何控制台错误？如果您在定义函数之后而不是之前设置
elem.onmouseover=btnOver；
，会有什么不同？这很重要。您在Firefox中尝试过这个吗？
var x；for（var i=0；i<10；i++）{x=a；function a（）{}
我有。在我发布之前。好吧，我想你是对的。根据规范，实际的函数定义被提升到函数的顶部。但是，函数对变量的赋值显然是顺序敏感的（你的示例在Chrome中工作，在Firefox中不工作）。显然，函数表达式和函数声明之间的实现存在一些混淆，它们被区别对待。Brilliant…工作起来很有魅力。感谢您的帮助和信息。哦，还有编写此…文档的原因。getElementById（myBtns[i].id）是因为我吃油漆芯片，坐短途公共汽车上学。另外，我对Javascript还比较陌生，所以我有点摸不着头脑。感谢朋友的帮助。我把它改成了var elem=myBtns[I]；一切都很好。我为我的评论道歉。这太离谱了。