Question

我玩js并尝试让用户选择背景颜色。我的脚本首先将数组中的所有颜色显示为div和一个按钮，然后您可以单击按钮将此颜色应用为背景颜色。
它适用于Chrome，但不适用于Firefox。我犯了一个大错吗？

<html>
<head><meta charset=utf-8></head>
<body onload="always()" id="body">
</body>
<script>
all_colors = ["#FFFF00","#FF00FF","#00B3FF",]

function always(){  
    for  (i=0; i< all_colors.length; i++){  
        var e = document.createElement("div"); 
        e.id="box"+(i);
        e.style.backgroundColor = all_colors[i];
        document.getElementById("body").appendChild(e);
        var btn = document.createElement("BUTTON");
        btn.id = (i);
        var t = document.createTextNode(i);
        btn.appendChild(t);         
        e.appendChild(btn);         
    }
}  
document.addEventListener("click",function(){myfunc()})

function myfunc(){
    var el=document.activeElement;
    var i=el.id;
    choose_bg(i);
}

function choose_bg(i){
    document.getElementById("body").style.backgroundColor = all_colors[i]
}

</script>
</html>

经过一些测试后，问题可能是“actve Element”在Chrome中正常运行但在FF或Safari中无效。顺便说一句，我在使用Mac，在我的Android FF上它可以工作！也许有人知道解决方案......

Answer 1

作为替代方案，您可以尝试使用以下代码来避免调用＆＃34; activeElement＆＃34;如果您怀疑FF版本中有错误：

<html>
<head><meta charset=utf-8></head>
<body onload="always()" id="body">
</body>
<script>
all_colors = ["#FFFF00","#FF00FF","#00B3FF",]

function always(){  
    for  (i=0; i< all_colors.length; i++){  
        var e = document.createElement("div"); 
        e.id="box"+(i);
        e.style.backgroundColor = all_colors[i];
        document.getElementById("body").appendChild(e);
        var btn = document.createElement("BUTTON");
        btn.id = (i);

        btn.addEventListener("click", myfunc);

        var t = document.createTextNode(i);
        btn.appendChild(t);
        e.appendChild(btn);
    }
}  

function myfunc(event){
    var eventSource = event.target || event.srcElement;
    var i = eventSource.id;
    choose_bg(i);
}

function choose_bg(i){
    document.getElementById("body").style.backgroundColor = all_colors[i]
}

</script>
</html>

适用于chrome但不适用于firefox，Eventlistener，appendChild和style.backgroundColor

1 个答案: