Question

I’ve appropriated some code to create a countdown timer for the launch of a new site. The timer itself, which uses a custom typeface, works very well.

However, when the if / else statement for timesup is true and goes to ‘else’, I can’t get any other function to work apart from the way you see it below:

function formatresults(){
    if (this.timesup==false){//if target date/time not yet met
        var displaystring="<div class='row'><div class='col'> "+arguments[0]+" </div> <div class='thincol'>&#149;</div> <div class='col'> "+arguments[1]+" </div> <div class='thincol'>&#149;</div><div class='col'>  "+arguments[2]+" </div> <div class='thincol'>&#149;</div> <div class='col'> "+arguments[3]+" </div> </div>"
    }
    else {
        var displaystring = "BAR"
    }
    return displaystring
}

if I change var displaystring to window.location (to load the full site at the end of the countdown), the timer ceases to work completely.

I know this is due to a fundamental misunderstanding of javascript in a way, but in all honesty I’ve developed sites using javascript and libraries like jquery and mootools and haven’t hit a brick wall like this in a long time.

If you have any advice, please do share it with me!

Many thanks in advance

Answer 1

Seems like you have a serious issue of no formatting madness going on. You should properly indent and format your JavaScript and terminate each statement with a semicolon:

function formatresults() {
   var displaystring = "";

   if (this.timesup == false) { // if target date/time not yet met
       displaystring = "<div class='row'><div class='col'> "
                     + arguments[0]
                     + " </div> <div class='thincol'>&#149;</div> <div class='col'> "
                     + arguments[1]
                     + " </div> <div class='thincol'>&#149;</div><div class='col'>  "
                     + arguments[2]
                     + " </div> <div class='thincol'>&#149;</div> <div class='col'> "
                     + arguments[3]
                     + " </div> </div>";
  } else {
    displaystring = "CRAP";
    window.location.href = "http://example.com/";
  }

  return displaystring
}

The above code should work just fine. Now I don’t know why you would want to redirect the user after having set displaystring, since that will abort the current page execution, but nonetheless; the above code should work.

As Ben Lee writes; you shouldn’t be doing window.location.href changes in this function, but instead in the function invoking formatresults() so formatresults() only does what it says, which is to format the results. This is how I’d solve it:

function formatresults() {
   var result = { success : false, value : null };

   if (this.timesup) { // if target date/time not yet met
       result.success = false;
       result.value = "Time's up!";
   } else {
       result.success = true;
       result.value = "<div class='row'><div class='col'> "
                    + arguments[0]
                    + " </div> <div class='thincol'>&#149;</div> <div class='col'> "
                    + arguments[1]
                    + " </div> <div class='thincol'>&#149;</div><div class='col'>  "
                    + arguments[2]
                    + " </div> <div class='thincol'>&#149;</div> <div class='col'> "
                    + arguments[3]
                    + " </div> </div>";
  }

  return result;
}

// ...

var result = formatresults();

if (!result.success) {
    window.location.href = "http://example.com/";
} else {
    // Do something with result.value
}