CODEWITHSUNDEEP
javascriptfirefoxgoogle-chromenan
Najdo
Najdo

Reputation: 80

Javascript works correct in Firefox but gives NaN in Chrome

I'm trying to help a friend of mine who has to do a test on people about popups (She studies communication sciences). So basically we have 2 websites with each a different popup. She asked me if I could create something that shows a popup every minute. But the minutes must work over several pages (ex. it starts on the index but when i browse around the website and the minute is over the popup has to show, no matter which page from the website is open).

My javascript is a bit rusty because it has been 3 years ago since I was in contact with the matter. So for the problem I used some of my old javascript assignments and I thought I would solve the problem using cookies. It's in the use of a global variable that I ran against some problems. I want the website to work on firefox/chrome/IE because she has to test it on the university computers and I have on idea which browser they are using over there.

So basically the console.log("timeRemaining") will show the correct number countdown in firefox (using firebug) but in the chrome logger (using inspect element) it will show NaN. Therefor the div will not be shown (I don't make use of a new windows because of popup blockers).

Where could be the problem? I allready made sure that the value returned from the cookie was being parsed using parseInt. I don't even understand why this simple code would return different results in Chrome than in Firefox.

function setCookie(name, value) {
    var str = name + "=" +escape(value);
    str += "; expires= Tue, 28 Dec 2013 00:00:00";
    document.cookie = str;
}

function getCookie(name) {
    var allCookies = document.cookie.split("; "); // spatie!
    for(i in allCookies) {
        var singleCookie = allCookies[i].split("=");
        if(singleCookie[0] == name) {
            return unescape(singleCookie[1]);
        }
    }
    return undefined;
}

function showLayer(layerId){
    console.log("showlayer");
}

function checkTime() {
    timeRemaining = timeRemaining - 1;
    console.log(timeRemaining);
    if(timeRemaining == 0) {
        showLayer("popup");
        timeRemaining = stdTijd;
    }
    setCookie("tijd", timeRemaining);
}

function loaders() {
    timeRemaining = parseInt(getCookie("tijd"));
    if(timeRemaining == undefined) {
        console.log("new cookie created");
        setCookie("tijd", stdTijd);
        timeRemaining = parseInt(getCookie("tijd"));
    }
    console.log("cookie set, timeremaining=" + timeRemaining);
    setInterval(checkTime, 1000);
}

var timeRemaining;
var stdTijd = 10;
if (document.getElementById) window.onload = loaders;

The NaN is giving on the console.log(timeRemaining); in the function checkTime.

Firefox prints: 

  loaded, display = none
  cookie set, timeremaining=10
  9
  8
  7
  ..

Chrome prints: 

  loaded, display = none
  cookie set, timeremaining=NaN
  NaN
  NaN
  ..

Thanks in advance.

EDIT: after deleting my cookies I get a NaN in firefox too. So the problem isn't just a difference between firefox and chrome instead it's a fundamental error in my code.

EDIT2:

Upvotes: 3

Views: 3182

Answers (2)

Jeff Beck
Jeff Beck

Reputation: 3938

There was a problem in getting the cookie back out, here is a fiddle that is working: jsFiddle

In loaders you were doing:

timeRemaining = parseInt(getCookie("timeRemaining"));

It should be:

timeRemaining = parseInt(getCookie("tijd"));

Also the check for the data back from the cookie needs to check if NaN, as the get cookie will send back undefined and parseInt will give back NaN:

if(timeRemaining==NaN)

Upvotes: 1

osahyoun
osahyoun

Reputation: 5231

timeRemaining is initially undefined, and this is what you're passing to setCookie. I think if you edit the following, it might work.

setCookie("tijd", timeRemaining);

To:

setCookie("tijd", timeRemaining || stdTijd);

Upvotes: 0

Related Questions