Question

我正在研究一个定时器代码并且它工作正常，但我无法触发按钮点击。我相信有一个愚蠢的错误，我无法弄清楚并且正在寻求帮助。

当我点击按钮时，我在控制台中收到以下错误。

未捕获的ReferenceError：未定义startTimer

我甚至尝试过使用$(document).ready()并在其中定义函数仍然没有运气。

代码

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

我正在寻找纯JS解决方案，而不是JQuery（$(btnId).on("click")）。

链接到JSFiddle

Answer 1

正如我在评论中提到的，使用innerText在大多数浏览器中都无法使用，请使用innerHTML。这应该有效：

＆＃13;

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();
}

＆＃13;

<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>

＆＃13;

Answer 2

所以，你的jsfiddle不起作用，因为jsfiddle不希望你在HTML部分中分配onclick事件。

您需要将其迁移到javascript部分。在HTML中，您需要为每个按钮分配一个id。然后，在javascript部分中，有类似

的内容

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

我还注意到您已将startTimer_out()作为一项功能，但您的HTML正在尝试拨打startTimer()。

看起来它可能只是一个小事。

Onclick无法找到功能

代码

2 个答案: