Problems with simple number loop in IE8

[bluebomber]

Hello, once again I'd like to stress I'm an absolute beginner with Javascript.I've written a simple bit of code that takes the value of a variable called "opac" (which starts at 10) and gradually reduces it to 0 and then back up to 10 in a short space of time - here is my code:var opac = 10;function fadein(){if (opac <= 10){document.getElementById('opac').innerHTML = opac;opac++;setTimeout("fadein()",10); }}function fadeout(){if (opac >= 0){document.getElementById('opac').innerHTML = opac;opac--;setTimeout("fadeout()",10);}}function fadeplus(){ fadeout() setTimeout("fadein()",150);} In the actual body I have:<span id="opac">-</span><a href="java script:fadeplus()">Forward with fade</a>one element displays the current value of "opac" and the other link calls the function which gets the number changing.This code works perfectly in chrome and firefox but I have all sorts of issues in IE8 - sometimes it works fine in IE, other times the number gets "stuck" at 0 and never counts back up to 10 - and more often than not when it does work half right, the variable never quite makes it to 0 or 10 - and tends to get stuck at 1 or 9.Any help would be greatly appreciated.

[ShadowMage]

Is it a typo or are you indeed missing a semicolon after the call to fadeout in your fadeplus function?

[bluebomber]

It wasn't a typo - indeed it was missing.So after feeling very stupid, I went back and fixed it - yet the problem still persists in IE.The number frequently gets stuck at 0.

[justsomeguy]

Your if condition is checking if opac is greater than or equal to zero, so when the counter reaches zero it's going to run it one more time and set it to -1. IE might not like that. It may be showing a Javascript error that you're not seeing. Note also that you're printing the value of opac before changing it, so the values you're seeing printed are the previous values, not the current values.

[bluebomber]

justsomeguy - thanks for the tips, everything you've said makes sense.I've now told the the counter to go up if the variable less than or equal to 9, and to count down if the variable is equal or greater than 1.I've also moved the getElementById lines below the counters.The end result is that it's better but still not working in IE!The first time the function is called the number gets trapped at 0, clicking it again finally gets the loop to reliably work in IE - strangely though, in IE the variable only hits 9, and never 10.In other browsers everything works perfectly just as it did before I made these changes.I'm baffled.

[justsomeguy]

Are you checking for Javascript errors in IE?

[thescientist]

are you checking for errors like JSG suggested? For future reference, if you make a bunch of revisions to your code and its still not working, you should post the updated code for us to look at.

[bluebomber]

Apologies, I cannot see any errors appearing anywhere in IE but I'm not sure if there's a specific place I should be looking.My code now looks like thisvar opac = 10;function fadein(){if (opac <= 10){opac++;document.getElementById('opac').innerHTML = opac;setTimeout("fadein()",10); }}function fadeout(){if (opac >= 0){opac--;document.getElementById('opac').innerHTML = opac;setTimeout("fadeout()",10);}}function fadeplus(){fadeout();setTimeout("fadein()",150);}

[justsomeguy]

IE will display a yellow warning icon in the bottom-left of the window in the status bar when there's a Javascript error. You can double-click that icon for a description.

[jeffman]

It seems to me you're asking for all kinds of trouble here:fadeout();setTimeout("fadein()",150);10 millisecnds is not a lot of time, and some browsers execute a little more slowly than that. It's very possible that line 2 above is getting executed before the recursive calls to fadeout have terminated. This means you'll have fadein and fadeout stepping on the same values. What I'm experiencing is that nothing ever terminates. The output seems to get stuck, but now and then it twitches up or down, which means that the process itself just keeps going and going. This would be more noticeable if you concatenated the output instead of simply resetting it. The actual numbers being generated would probably surprise you.FWIW, it did this in my Firefox, also.When I change the time values to 100 and 1500, the problem seems to disappear. Different values might help, or a more reliable trigger for fadein might help.

[dsonesuk]

i think the main problem is the setTimeout are conflicting with each other, i don't think function fadeplus() is even required if you set an else condition to transfer to alternative fade function if condition is not met similar to below.function fadein() { if (opac <= 10) { document.getElementById('opac').innerHTML = opac; opac++; setTimeout("fadein()",500); } else { fadeout(); } }function fadeout() { if (opac >0) { opac--; document.getElementById('opac').innerHTML = opac; setTimeout("fadeout()",500); } else { fadein(); } }with<a href="java script:fadeout()">Forward with fade</a>

[bluebomber]

Deirdre's Dad - I agree I tend to get better results if I just slow things down a bit, however even with large timing values I still get the issue where the first click in IE8 doesn't work properly.dsonesuk - apologies if this is an obvious question, but your example loops indefinitely - I'd like the number to reach zero, then go back up to 10 and then stop until the function is called again. How would that work in your example?(by the way I know clicking while the function runs causes problems but that's fine - I'm not worried about that for the moment.)

[dsonesuk]

easy just removeelse{fadeout();}

[bluebomber]

Thanks, I'll give this a go.

[thescientist]

also, you should learn to find the error console for any browser your testing in. just google it if you have problems finding it. it is essential.