I played around with js and tried to make the user choose a background color.
My script first displays all colors from an array as div plus a button, then you can click a button to apply this color as background color.
It works in Chrome for me but not in Firefox. Am I making a huge mistake?
<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>
After some testing the problem maybe is the "actve Element" which works properly in Chrome but not in FF or Safari. By the way I am using a Mac, on my Android FF it works! maybe someone knows a solution...
As an alternative, you could try to use the following code to avoid the call to "activeElement" if you suspect there is a bug on it in your FF version: