JS Timer with setTimeout get a "Uncaught SyntaxError: Unexpected token ("

Question

I've been trying to make a JavaScript timer using the setTimeout() command. When i look at it in the browser console returns "Uncaught SyntaxError: Unexpected token (".

Also you can see the code here: http://mathiakiaer.site88.net/timer/

This is the HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Timer</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="script.js" type="text/javascript"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <article>
            <p id="timerTime"><span id="timerTimeMinutes">00</span>:<span id="timerTimeSeconds">00</span></p>
            <button id="timerStart" onclick='repeatTimer()'>START</button>
            <div id="timerChangeDiv">
                Minutes: <input id="timerInputMinutes" value="0" type="number" min="0" max="60"><br>
                Seconds: <input id="timerInputSeconds" value="0" type="number" min="0" max="60"><br>
                <button onclick="setTime()">Change Time</button>
            </div>
        </article>
    </body>
</html>

And this is the JavaScript code:

var seconds=0;
var minutes=0;
function countDown() {
    if(seconds!==0) {
        repeatTimer();
        seconds--;
    } else {
        if(minutes!==0) {
            minutes--;
            seconds=59;
            repeatTimer();
        } else {
            alert("The timer is done");
        }
    }
    refresh();
}
function repeatTimer() {
    setTimeout("function() {countDown();}", 1000);
}
function setTime() {
    seconds=parseInt(document.getElementById("timerInputSeconds").value);
    minutes=parseInt(document.getElementById("timerInputMinutes").value);
    document.getElementById("timerInputSeconds").value=0;
    document.getElementById("timerInputMinutes").value=0;
    refresh();
}
function refresh() {
    if(seconds>9) {
        document.getElementById("timerTimeSeconds").innerHTML=seconds;
    } else {
        var secondsShow="0" + seconds;
        document.getElementById("timerTimeSeconds").innerHTML=secondsShow;
    }
    if(minutes>9) {
        document.getElementById("timerminutes").innerHTML=minutes;
    } else {
        var minutesShow="0" + minutes;
        document.getElementById("timerTimeMinutes").innerHTML=minutesShow;
    }
}

`setTimeout("function() {countDown();}", 1000);` the first param accepts a `function` not a `string`, change to `setTimeout(function() {countDown();}, 1000);` — fuyushimoya, Jul 05 '15 at 16:05
you could use a string like so: `"countDown();"`, but this is really [bad practice](http://stackoverflow.com/questions/6081560/is-there-ever-a-good-reason-to-pass-a-string-to-settimeout) — jhinzmann, Jul 05 '15 at 16:09
In this code no needs *anonymous functions*, use like this `setTimeout(countDown, 1000);`. — Protomen, Jul 05 '15 at 16:12
@fuyushimoya: The first param can accept a string. I do however strongly advise people not to use that feature. — slebetman, Jul 05 '15 at 16:43
@slebetman Yes, after jhinzmann and you pointed out, I do tested some case, that it can work by write something like `"countDown();"`, thanks for the notification. — fuyushimoya, Jul 05 '15 at 16:47

score 3 · Answer 1 · answered Jul 05 '15 at 16:07

3

first param is function not string.

function repeatTimer() {
    setTimeout(function() {countDown()}, 1000);
}

or

function repeatTimer() {
        setTimeout(countDown, 1000);
    }

answered Jul 05 '15 at 16:07

user3227295

2,168
1
11
17

score 0 · Answer 2 · answered Jul 05 '15 at 16:09

0

An alternative use for example of user3227295 is:

function repeatTimer() {
    setTimeout("function() {countDown();}", 1000);
}

by

function repeatTimer() {
    setTimeout(countDown, 1000);
}

answered Jul 05 '15 at 16:09

Protomen

9,471
9
57
124

JS Timer with setTimeout get a "Uncaught SyntaxError: Unexpected token ("

2 Answers2