Onclick unable to find function

Question

I was working on a Timer code and its working fine but I'm unable to trigger on button click. I believe there is a silly mistake that I'm not able to figure out and was looking for help.

When I click on button, I get following error in console.

Uncaught ReferenceError: startTimer is not defined

I even have tried using $(document).ready() and defined functions in it still no luck.

Code

function timer(){
    var time = {
        sec:00,
        min:00,
        hr:00
    }
    var max = 59;
    var interval = null;

    function update(str){
        time[str]++;
        time[str] = time[str]%60;
        if(time[str] == 0){
            str == "sec"? update("min"):update("hr");
        }
        print(str);
    }

    function print(str){
        var _time = time[str].toString().length == 1?"0" + time[str]:time[str];
        document.getElementById("lbl"+str).innerText = _time;
    }

    function initInterval(){
        interval = setInterval(function(){
            update("sec");
        },1000);
    }
    
    function stopTimer(){
     clearInterval(interval);
    }
    
    return {
        'init': initInterval,
        'stop': stopTimer
    }
};
var time = new timer();
function startTimer(){
    time.init();
}

function endTimer(){
    time.stop();
}

<div>
    <span id="lblhr">00</span>
    : <span id="lblmin">00</span>
    : <span id="lblsec">00</span>
</div>

<button onclick="startTimer()">Start</button>
<button onclick="endTimer()">Stop</button>

I'm looking for pure JS solution, and not JQuery($(btnId).on("click")).

Link to JSFiddle

Also you are defining your functions inside a function, so they can't be found as they are inside the function as a closure. — Ed Bayiates, Nov 02 '15 at 17:35
how does **`new`** `timer();` play with `return {'init': initInterval, 'stop': stopTimer};`? — Igor, Nov 02 '15 at 17:40
`new timer()` function returns object with mentioned properties. I'm not sure its the best way for function as a class, but works fine. Also issue is that I'm unable to even call startTimer function. — Rajesh, Nov 02 '15 at 17:43
The problem is your use of [innerText instead of innerHTML](http://stackoverflow.com/questions/19030742/difference-between-innertext-and-innerhtml-in-javascript) in the print function — James, Nov 02 '15 at 17:45
@James Following [JSFiddle](http://jsfiddle.net/RajeshDixit/0gvfc5yy/3/) uses self invoking function instead of button click. — Rajesh, Nov 02 '15 at 17:48

score 2 · Accepted Answer · answered Nov 02 '15 at 17:47

As I mentioned in a comment, using innerText won't work in most browsers, use innerHTML. This should work:

function timer(){
    var time = {
        sec:00,
        min:00,
        hr:00
    }
    var max = 59;
    var interval = null;

    function update(str){
        time[str]++;
        time[str] = time[str]%60;
        if(time[str] == 0){
            str == "sec"? update("min"):update("hr");
        }
        print(str);
    }

    function print(str){
        var _time = time[str].toString().length == 1?"0" + time[str]:time[str];
        document.getElementById("lbl"+str).innerHTML = _time;
    }

    function initInterval(){
        interval = setInterval(function(){
            update("sec");
        },1000);
    }
    
    function stopTimer(){
     clearInterval(interval);
    }
    
    return {
        'init': initInterval,
        'stop': stopTimer
    }
};
var time = new timer();
function startTimer(){
    time.init();
}

function endTimer(){
    time.stop();
}

<div>
    <span id="lblhr">00</span>
    : <span id="lblmin">00</span>
    : <span id="lblsec">00</span>
</div>

<button onclick="startTimer()">Start</button>
<button onclick="endTimer()">Stop</button>

Thanks for answer, but I'm still confused a bit. Error meant, it was unable to find reference to function, but changing it to innerHTML solved the problem. Also [Updated JSFiddle](http://jsfiddle.net/RajeshDixit/0gvfc5yy/4/) still shows same error. — Rajesh, Nov 02 '15 at 17:56
That's a JSFiddle related problem. I just used your code snippet to diagnose the actual problem. — James, Nov 02 '15 at 17:57
Yup. That's the problem. Have created a [CodePen](http://codepen.io/rajesh_dixit/pen/RWBowQ) and its working properly. Thanks once again. I'll add another question for that. — Rajesh, Nov 02 '15 at 18:02

score 1 · Answer 2 · answered Nov 02 '15 at 17:47

So, your jsfiddle doesn't work because jsfiddle isn't expecting you to assign the onclick event in the HTML section.

You need to migrate that to the javascript section. In the HTML you need to assign an id to each button. Then, in the javascript section, have something like

document.getElementById("bStart").onclick = startTimer;

I also noticed that you have startTimer_out() as a function, but your HTML is trying to call startTimer().

Looks like it may just a jsfiddle thing.

Onclick unable to find function

Code

2 Answers2

Linked