CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
Nicolas
Nicolas

Reputation: 2376

JavaScript timer function not working in IE10 while it does work in chrome

I am currently stuck on a JavaScript code piece which DOES work in chrome (version 44.0.2403.125) but DOESN'T in IE 10.

I've read multiple issues on stackoverflow with (kinda) the same problem but all what is suggested there doesn't seem to work for me (or I don't implement it correctly).

Anyway I am stuck on the following: I've got a timer function in JavaScript which does a countdown from 10 minutes to 0, when reaching 0 minutes it fires a jquery function, a popup box.

The javascript code is as follow:

<SCRIPT LANGUAGE="JavaScript">
    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                my_fun(); //the jquery function that popups the message-box 
                timer = duration;
            }
        }, 1000); //how fast to count
    }
    window.onload = function () {
        var tenMinutes = 60 * 10,
            display = document.querySelector('#time');
        startTimer(tenMinutes, display);
    };
</SCRIPT>

The Jquery function is pretty long (to paste here) but this doesn't seem to be the problem. I used the jquery function separately (without firing it from JavaScript) and this works in IE - it popups when its called in the html. Besides that I referenced the jquery-1.11.2.min.js library which overcomes pretty much all browser incompatibility problems (as far as I know).

The next thing I checked for was the IE10 Console log. There I noticed that it kept generating the following error:

SCRIPT5007: Unable to set property 'textContent' of undefined or null reference.

This made me believe that the textContent property is unavailable in IE10 so I checked that as well, though after research I found out this property is allowed (should work) in IE10.

The next thing I could think of was that the window.onload was not working in IE10, I read a few suggestions about using new in the onload in IE10 like this: window.onload = new function but this also didn't had any effect.

Then I try'd to paste the window.onload JavaScript code above the timer function so that perhaps the textContent isn't empty but this also didn't have any effect.

So now I am out of ideas, anyone has a clue how I can fix it?

UPDATE

Thank you all for the answers and suggestions! After trying all the suggestions it still took a while to get it fixed but nonetheless I got it fixed.

First I try'd to add the var display; as a global but this didn't had any effect. So next I looked at my code page in general. I am working on a asp classic page and doing a lot of server side stuff. The page view depends on some queries. But that aside, I had my $time ID after some asp classic server side handles so I thought that moving the ID up tot the page (before the server side stuff) could make it work. But this didn't had any effect. I tried several things after that and honestly I can't remember all of it.

Then I saw #Arunachalam answer and thought this could actually work since my other JQuery did its job in IE while JavaScript didn't. So instead of using:

window.onload = function () {
            var tenMinutes = 60 * 10,
                display = document.querySelector('#time');
            startTimer(tenMinutes, display);
        };

I used the JQuery version of it:

$(function() {

 var tenMinutes = 60 * 10,display = document.querySelector('#time');  
 startTimer(tenMinutes, display);

}

But sadly this also didn't had any effect.. 100 tries/adjustments later (and reversing them since they didn't work) I tried it again with Jquery but modifying it to:

jQuery(function ($) {
    var tenMinutes = 60 * 10,
        display = $('#time');
    startTimer(tenMinutes, display);
});

and combining the JavaScript function and the above Jquery function in the same SCRIPT tag by changing <SCRIPT LANGUAGE="JavaScript"> to <SCRIPT>

And that did the trick! Got it working now!

Upvotes: 1

Views: 577

Answers (3)

Mouser
Mouser

Reputation: 13304

The timer works perfectly. display refers to null in IE. Your code is good. I guess time isn't present somehow in IE.

Upvotes: 0

Arunachalam
Arunachalam

Reputation: 111

Since you are already using JQuery, I recommend you to call your function inside JQuery onload instead of Window onload.

$(function() {

 var tenMinutes = 60 * 10,display = document.querySelector('#time');  
 startTimer(tenMinutes, display);

}

Upvotes: 3

Ahs N
Ahs N

Reputation: 8366

Add var display; before the line function startTimer(duration, display) {...

The error means that the variable display is not found within the scope you were using it. Defining it at the top will make it a global variable which will then be accessible anything within the code.

Complete code should look like this:

<SCRIPT LANGUAGE="JavaScript">
    var display;
    function startTimer(duration, display) {
        var timer = duration, minutes, seconds;
        setInterval(function () {
            minutes = parseInt(timer / 60, 10)
            seconds = parseInt(timer % 60, 10);

            minutes = minutes < 10 ? "0" + minutes : minutes;
            seconds = seconds < 10 ? "0" + seconds : seconds;

            display.textContent = minutes + ":" + seconds;

            if (--timer < 0) {
                my_fun(); //the jquery function that popups the message-box 
                timer = duration;
            }
        }, 1000); //how fast to count
    }
    window.onload = function () {
        var tenMinutes = 60 * 10,
            display = document.querySelector('#time');
        startTimer(tenMinutes, display);
    };
</SCRIPT>

Upvotes: 3

Related Questions