Was wondering if anyone could provide some insight as to why this js does not work in Firefox but works perfectly and as intended under IE and Chrome?
It changes the color of a lot of divs when hovering over some buttons at the top of the page.
Can be seen on my site: ptable.info
window.onload=function(){
var noblegasesColl = document.getElementsByClassName('noblegases');
var halogensColl = document.getElementsByClassName('halogens');
var othernonmetalsColl = document.getElementsByClassName('othernonmetals');
var transitionmetalsColl = document.getElementsByClassName('transitionmetals');
var metalloidsColl = document.getElementsByClassName('metalloids');
var posttransitionColl = document.getElementsByClassName('posttransition');
var alkalineColl = document.getElementsByClassName('alkaline');
var alkaliColl = document.getElementsByClassName('alkali');
var actinoidsColl = document.getElementsByClassName('actinoids');
var lanthanoidsColl = document.getElementsByClassName('lanthanoids');
//Noble Gases
document.getElementById('noblegasesButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('noblegasesButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(actinoidsColl, '#f4a460');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Halogens
document.getElementById('halogensButton').addEventListener('mouseover', function(){
changeColor(noblegasesColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('halogensButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Non-metals
document.getElementById('nonmetalsButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(noblegasesColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('nonmetalsButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Transition metals
document.getElementById('transitionmetalsButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(noblegasesColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('transitionmetalsButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Post-transition
document.getElementById('posttransitionButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(noblegasesColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('posttransitionButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Metalloids
document.getElementById('metalloidsButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(noblegasesColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('metalloidsButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Alkaline
document.getElementById('alkalineButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(noblegasesColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('alkalineButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Alkali
document.getElementById('alkaliButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(noblegasesColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('alkaliButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Lanthanoids
document.getElementById('lanthanoidsButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(actinoidsColl, '#696969');
changeColor(noblegasesColl, '#696969');
});
document.getElementById('lanthanoidsButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
//Actinoids
document.getElementById('actinoidsButton').addEventListener('mouseover', function(){
changeColor(halogensColl, '#696969');
changeColor(othernonmetalsColl, '#696969');
changeColor(transitionmetalsColl, '#696969');
changeColor(metalloidsColl, '#696969');
changeColor(posttransitionColl, '#696969');
changeColor(alkalineColl, '#696969');
changeColor(alkaliColl, '#696969');
changeColor(noblegasesColl, '#696969');
changeColor(lanthanoidsColl, '#696969');
});
document.getElementById('actinoidsButton').addEventListener('mouseout', function(){
changeColor(halogensColl, '#00FFFF');
changeColor(othernonmetalsColl, '#7CFC00');
changeColor(transitionmetalsColl, '#ff78bb');
changeColor(metalloidsColl, '#7A378B');
changeColor(posttransitionColl, '#8FBC8F');
changeColor(alkalineColl, '#e5e500');
changeColor(alkaliColl, '#FF6600');
changeColor(noblegasesColl, '#3399CC');
changeColor(lanthanoidsColl, '#CC1100');
changeColor(actinoidsColl, '#f4a460');
});
}
function changeColor(coll, color){
for(var i=0, len=coll.length; i<len; i++)
{
coll[i].style["background-color"] = color;
}
}
You have to use either style.backgroundColor
or style['backgroundColor']
to set the background-color. Either of these methods should work across browsers. I have tested in FireFox 23, Opera 15, Chrome 31 (Dev Build) and IE10.
You can refer here for a sample fiddle. The fiddle has three div
with id
as aa
, bb
and cc
respectively.
When you do mouseover
and mouseout
, you will find that it affects all three div
in Chrome, IE10 and Opera. But in FireFox, it affects only the first and third div
because the second div
uses style['background-color']
and is not recognized by FireFox.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.