Javascript execution bug in setTimeout loop when trying to fade.style.opacity += 0.1.
Javascript execution bug in setTimeout loop when trying to fade.style.opacity += 0.1. It works with negative operator -= but not with a positive operator +=. Browser (Firefox 11) just keeps telling me that the opacity is 0.1 all the time.
Here is my code:
function setOpacity() {
i++;
if (dir == 1)
{
fade.style.opacity -= 0.1;
if (fade.style.opacity < 0.1)
{ dir = 0; }
}
else
{
fade.style.opacity = fade.style.opacity + 0.1;
if (fade.style.opacity > 0.9)
{ dir = 1; }
}
document.getElementById('opacity').innerHTML = "Opacity: " + fade.style.opacity;
document.getElementById('dirr').innerHTML = "dir = " + dir;
document.getElementById('i').innerHTML = "i = " + i;
t = setTimeout("setOpacity()",100);
}
So if I change the += operator to -=, the opacity keeps changing. I'm pretty sure that the problem must be in Firefox because with IE everything kept going even with the += operator.
Modified by Haapavuo
Chosen solution
The problem seems to be that the opacity value isn't seen as a float.
Use these instead:
fade.style.opacity = fade.style.opacity*1 - 0.1; fade.style.opacity = fade.style.opacity*1 + 0.1;
You may consider using document.getElementById('fade') instead of the fade identifier to avoid warnings in the Error Console.
Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: http://greenpark.fi/js_fader.php
Line: 23
All Replies (4)
A good place to ask advice about web development is at the MozillaZine "Web Development/Standards Evangelism" forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the MozillaZine forum site in order to post at that forum.
Do you have a page with full testing code?
Yes the code is here: Javascript fader
I still believe that this problem is caused by Firefox, not incorrect code.
dir = 1 --> fade out, dir = 0 --> fade in
i = loop counter
As you can see, the loop keeps going but browser stops changing the opacity. In IE the variables change just fine. On Firefox the opacity stops changing when the text should fade back in.
EDIT: There seems to be a bug in Firefox. It doesn't recognize the '+=' operator as it should. To Firefox 11, '+=' operator seems to be the same as '=' operator.
Modified by Haapavuo
Chosen Solution
The problem seems to be that the opacity value isn't seen as a float.
Use these instead:
fade.style.opacity = fade.style.opacity*1 - 0.1; fade.style.opacity = fade.style.opacity*1 + 0.1;
You may consider using document.getElementById('fade') instead of the fade identifier to avoid warnings in the Error Console.
Warning: Element referenced by ID/NAME in the global scope. Use W3C standard document.getElementById() instead.
Source File: http://greenpark.fi/js_fader.php
Line: 23
Thank you very much!
I made the changes you suggested and got the code to work. So document.getElementById('fade').style.opacity*1 is considered as a float but document.getElementById('fade').style.opacity is not? Weird... I didn't know that a integer multiplier changes the variable type.