My javascript is not compatible with IE 8 and IE 9

My javascript is not compatible with IE 8 and IE 9

<script type="text/javascript">
                   var oneHour = 60 * 60, // 60 seconds * 60 minutes
                     twentyMins = 20 * 60, // 20 minutes * 60 seconds
                oneMin = 60, // 60 seconds
                fiveSecs = 5;
                  
                  window.onload = function()
                  {
                            countDown('linkappears', '<a href="index.cfm"><input type="button" value="continue" name="cbutton" /></a>', fiveSecs);
                  }

                  function countDown(elID, output, seconds)
                  {
                      var mins,
                    secs = seconds,
                    pad = function (n)
                        {
                        return n > 9 ? n : '0' + n;
                    };
   
                // get the hours by dividing by the number of seconds in an hour
                           hours = Math.floor(secs / 3600); //  60 * 60 = 3600
                // get the remaining seconds
                      secs %= 3600;
                // likewise, get the number of minutes of by dividing the remaining seconds by 60
                           mins = Math.floor(secs / 60);
                // again, get the remainder of seconds
                      secs %= 60;
   
                // pad any numbers less than 9 with a leading 0
                      secs = pad(secs);
                      mins = pad(mins);
                      hours = pad(hours);

                      document.getElementById(elID).innerHTML = (seconds === 0) ? output : 'Time until link appears: ' + hours + ':' + mins + ':' + secs;
   
                // instead of returning, just don't call setTimout if we are done
                      if (seconds !== 0)
                        {
                          seconds -= 1;
              // there is no need to pass a string to setTimout, you just pass the function name,
              // followed by the timeout in ms, followed by any params
                    setTimeout(countDown, 1000, elID, output, seconds);
                      }

                  }
        </script>
            
            <div style="margin:10px; 0; 10px; 10px;" id="linkappears"></div>
smares323Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
IE only supports setTimeout with 2 arguments, not the extra 'callback function arguments'. You can find some discussion/explanation and a generic solution here: https://developer.mozilla.org/en/docs/Web/API/window.setTimeout

Here's another take on it;
So the 'problem' is in the line:
setTimeout(countDown, 1000, elID, output, seconds);

Open in new window


To solve in your situation you could also just make those 3 extra arguments into global variables (not the best solution so I won't post that)...

OR, if you want a bit nicer solution you can wrap it all in a plugin-like object, this way it should also be possible more easily to put more than 1 timed link on a page:
<script type="text/javascript">

    var oneHour = 60 * 60, // 60 seconds * 60 minutes
        twentyMins = 20 * 60, // 20 minutes * 60 seconds
        oneMin = 60, // 60 seconds
        fiveSecs = 5;

    var myCountDown = function(elID, output, seconds) {

        var elmnt = document.getElementById(elID);
        countDown();

        function pad (n)
        {
            return n > 9 ? n : '0' + n;
        }

        function countDown()
        {
            var hours,
                mins,
                secs = seconds;

            // get the hours by dividing by the number of seconds in an hour
            hours = Math.floor(secs / 3600); //  60 * 60 = 3600
            // get the remaining seconds
            secs %= 3600;
            // likewise, get the number of minutes of by dividing the remaining seconds by 60
            mins = Math.floor(secs / 60);
            // again, get the remainder of seconds
            secs %= 60;

            // pad any numbers less than 9 with a leading 0
            secs = pad(secs);
            mins = pad(mins);
            hours = pad(hours);

            elmnt.innerHTML = (seconds === 0) ? output : 'Time until link appears: ' + hours + ':' + mins + ':' + secs;

            // instead of returning, just don't call setTimout if we are done
            if (seconds !== 0)
            {
                seconds -= 1;
                setTimeout(countDown, 1000);
            }
        }

    };

    window.onload = function()
    {
        new myCountDown('linkappears', '<a href="index.cfm"><input type="button" value="continue" name="cbutton" /></a>', fiveSecs);
    };

</script>

Open in new window

This is tested in IE8 and FireFox (up-to-date version).

Any questions/concerns, just ask.

PS: not sure if it's relevant but your div style contains an error, should probably be:
style="margin:10px 0 10px 10px;"

Open in new window


PS2: also not sure about putting a button in an <a> tag, it works in FireFox but it looks invalid to me and doesn't seem to work in IE8.
0
smares323Author Commented:
This fixed the problem.

setTimeout("countDown('"+elID+"', '"+output+"', "+(seconds)+")", 1000);
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Robert SchuttSoftware EngineerCommented:
That is one of the solutions discussed on that MDN link I posted, but frankly it's the worst solution you could choose. That last piece of code I posted should be a much better choice going forward into the future of javascript instead of stepping back.
0
Robert SchuttSoftware EngineerCommented:
PS, I meant the link to developer.mozilla.org (MDN = Mozilla Developer Network), look under "Passing string literals". They explain it much better than I ever could. Basically calling setTimeout like that is compared directly with the 'evil' eval.
0
smares323Author Commented:
I figured it out.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.