Javascript計數器函數onload不工作

我想修改這個小提琴，以便它啓動計數器onload，但是當我在身體標記上使用onload它似乎不工作。我錯過了什麼？看起來代碼很簡單。以下是原始小提琴 Original fiddle Javascript計數器函數onload不工作

var timer = document.getElementById("timer"); 
 
var start = document.getElementById("start"); 
 
var pause = document.getElementById("pause"); 
 
var resume = document.getElementById("resume"); 
 
var id; 
 
var value = "00:00"; 
 

 
startTimer(m, s) 
 

 
function startTimer(m, s) { 
 
    timer.textContent = m + ":" + s; 
 
    if (s == 0) { 
 
    if (m == 0) { 
 
     return; 
 
    } else if (m != 0) { 
 
     m = m - 1; 
 
     s = 60; 
 
    } 
 
    } 
 

 
    s = s - 1; 
 
    id = setTimeout(function() { 
 
    startTimer(m, s) 
 
    }, 1000); 
 
} 
 

 
function pauseTimer() { 
 
    value = timer.textContent; 
 
    clearTimeout(id); 
 
} 
 

 
function resumeTimer() { 
 
    var t = value.split(":"); 
 

 
    startTimer(parseInt(t[0], 10), parseInt(t[1], 10)); 
 
} 
 

 
start.addEventListener("click", function() { 
 
    startTimer(5, 0); 
 
}, false); 
 

 
pause.addEventListener("click", pauseTimer, false); 
 

 
resume.addEventListener("click", resumeTimer, false);

<body onload="startTimer(5, 0);"> 
 

 
    <p id="timer">00:00</p> 
 
    <button id="start">Start</button> 
 
    <button id="pause">Pause</button> 
 
    <button id="resume">Resume</button> 
 

 
</body>

來源

2017-03-01 TwoThumbSticks

您正在調用腳本中的'startTimer（m，s）'，其中'm'和's'爲'undefined'。 –

對不起，即時通訊新手與JavaScript，但wouldnt onload確保所有的初始化已完成之前運行？ – TwoThumbSticks

刪除startTimer(m, s)從您的代碼。沒有定義m和s。

<body onload="startTimer(5, 0);"> 
 

 
    <p id="timer">00:00</p> 
 
    <button id="start">Start</button> 
 
    <button id="pause">Pause</button> 
 
    <button id="resume">Resume</button> 
 

 
</body> 
 

 
<script> 
 
    var timer = document.getElementById("timer"); 
 
    var start = document.getElementById("start"); 
 
    var pause = document.getElementById("pause"); 
 
    var resume = document.getElementById("resume"); 
 
    var id; 
 
    var value = "00:00"; 
 

 

 

 
    function startTimer(m, s) { 
 
    timer.textContent = m + ":" + s; 
 
    if (s == 0) { 
 
     if (m == 0) { 
 
     return; 
 
     } else if (m != 0) { 
 
     m = m - 1; 
 
     s = 60; 
 
     } 
 
    } 
 

 
    s = s - 1; 
 
    id = setTimeout(function() { 
 
     startTimer(m, s) 
 
    }, 1000); 
 
    } 
 

 
    function pauseTimer() { 
 
    value = timer.textContent; 
 
    clearTimeout(id); 
 
    } 
 

 
    function resumeTimer() { 
 
    var t = value.split(":"); 
 

 
    startTimer(parseInt(t[0], 10), parseInt(t[1], 10)); 
 
    } 
 

 
    start.addEventListener("click", function() { 
 
    startTimer(5, 0); 
 
    }, false); 
 

 
    pause.addEventListener("click", pauseTimer, false); 
 

 
    resume.addEventListener("click", resumeTimer, false); 
 
</script>

來源

2017-03-01 06:36:27 Sankar

只是一個問題，爲什麼它在我的原始小提琴工作時並不是當我所做的就是調用啓動定時器函數onload？在最初的小提琴中，它並沒有被定義，後來被稱爲通過onclick事件監聽器。 – TwoThumbSticks

@TwoThumbSticks比較你的代碼在小提琴和你的問題......在你的小提琴中找不到'startTimer（m，s）'。 – Sankar

移動的startTimer(m,s)至底部：

var timer = document.getElementById("timer"); 
var start = document.getElementById("start"); 
var pause = document.getElementById("pause"); 
var resume = document.getElementById("resume"); 
var id; 
var value = "00:00"; 

function startTimer(m, s) { 
    timer.textContent = m + ":" + s; 
    if (s == 0) { 
     if (m == 0) { 
      return; 
     } else if (m != 0) { 
      m = m - 1; 
      s = 60; 
     } 
    } 

    s = s - 1; 
    id = setTimeout(function() { 
     startTimer(m, s) 
    }, 1000); 
} 

function pauseTimer() { 
    value = timer.textContent; 
    clearTimeout(id); 
} 

function resumeTimer() { 
    var t = value.split(":"); 

    startTimer(parseInt(t[0], 10), parseInt(t[1], 10)); 
} 

start.addEventListener("click", function() { 
    startTimer(5, 0); 
}, false); 

pause.addEventListener("click", pauseTimer, false); 

resume.addEventListener("click", resumeTimer, false); 

startTimer(5,0); // <----------

來源

2017-03-01 06:36:43 mvermand

只是刪除startTimer所（M，S）

var timer = document.getElementById("timer"); 
 
var start = document.getElementById("start"); 
 
var pause = document.getElementById("pause"); 
 
var resume = document.getElementById("resume"); 
 
var id; 
 
var value = "00:00"; 
 

 

 
function startTimer(m, s) { 
 
    timer.textContent = m + ":" + s; 
 
    if (s == 0) { 
 
    if (m == 0) { 
 
     return; 
 
    } else if (m != 0) { 
 
     m = m - 1; 
 
     s = 60; 
 
    } 
 
    } 
 

 
    s = s - 1; 
 
    id = setTimeout(function() { 
 
    startTimer(m, s) 
 
    }, 1000); 
 
} 
 

 
function pauseTimer() { 
 
    value = timer.textContent; 
 
    clearTimeout(id); 
 
} 
 

 
function resumeTimer() { 
 
    var t = value.split(":"); 
 

 
    startTimer(parseInt(t[0], 10), parseInt(t[1], 10)); 
 
} 
 

 
start.addEventListener("click", function() { 
 
    startTimer(5, 0); 
 
}, false); 
 

 
pause.addEventListener("click", pauseTimer, false); 
 

 
resume.addEventListener("click", resumeTimer, false);

<body onload="startTimer(5, 0);"> 
 

 
    <p id="timer">00:00</p> 
 
    <button id="start">Start</button> 
 
    <button id="pause">Pause</button> 
 
    <button id="resume">Resume</button> 
 

 
</body>

來源

2017-03-01 06:43:26 Abi

現有的答案似乎沒有解決您的實際問題，這是執行的順序。

您onload="startTimer(…)"事件不工作的原因是劇本本身被設置爲執行「的onLoad」，所以onload="…"在激發腳本運行之前，這意味着startTimer還沒有定義。

通過改變JavaScript的 '負載類型' 到「不循環 - 在<體>」（見http://imgur.com/79p4wO6），你可以使用onLoad=屬性你期望的方式：

http://jsfiddle.net/wwg8H/31/

來源

2017-03-01 06:53:39 Cauterite

現在已經有了很多意義，爲什麼我的代碼沒有在jsfiddle中運行，並且運行在SO代碼片段中。我確實使用了不同的方法來編寫自己的html，發現我確實有一個語法錯誤未定義的變量，但最重要的是，像您提到的那樣是執行的主體。除了無包裝，我需要把之後之前它正常工作 – TwoThumbSticks

是的，沒有包裝 - 在< body >「正是這樣做;它將腳本放在主體的末尾，因此它幾乎在文檔分析階段結束時執行。當你還在學習語言的時候，你必須考慮所有這些是一件令人遺憾的事情;這是javascript的crufty事件驅動的API的不幸本質 – Cauterite

由於瀏覽器從上到下呈現HTML頁面，您的Javascript將在正文內容加載後呈現。因此，Body - Onload事件不能調用您的startTimer方法，因爲它在頁面中尚不可用。

您可以將startTimer（5,0）調用移動到腳本的底部。

來源

2017-03-01 07:00:16 Sudharsan

Javascript計數器函數onload不工作

回答

相關問題