我玩过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上可以正常工作！也许有人知道解决方案...
或者，如果您怀疑FF版本中存在错误，则可以尝试使用以下代码来避免调用“ activeElement”：
<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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句