Javascript Zählerfunktion onload funktioniert nicht

Ich versuche, diese Geige zu ändern, so dass es den Zähler onload beginnt, aber wenn ich onload auf dem Body-Tag verwenden, es scheint nicht zu funktionieren. Was habe ich verpasst? Es scheint, der Code ist geradlinig. Unten ist der Original Geige Original fiddle Javascript Zählerfunktion onload funktioniert nicht

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>

Quelle

2017-03-01 TwoThumbSticks

Sie rufen 'starttimer (m, n)' in Ihrem Skript, in dem 'm' und 'S' sind' undefined'. –

Tut mir leid, ich bin Neuling mit Javascript, aber nicht onload stellen Sie sicher, dass alle Initialisierung abgeschlossen ist, bevor es ausgeführt wird? – TwoThumbSticks

entfernen startTimer(m, s) aus dem Code. Dort sind m und s nicht definiert.

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

Quelle

2017-03-01 06:36:27 Sankar

Nur eine Frage, warum hat es für die ursprüngliche Geige funktioniert, wenn in meinem es nicht, wenn alles, was ich getan habe, die Start-Timer-Funktion Onload aufgerufen wurde? In der ursprünglichen Geige wurde es ebenfalls nicht definiert und später durch einen onclick-Ereignis-Listener aufgerufen. – TwoThumbSticks

@TwoThumbSticks vergleiche deinen Code in Geige und deine Frage ... 'startTimer (m, s)' wird nicht in deiner Geige gefunden. – Sankar

Bewegen Sie den startTimer(m,s) nach unten:

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); // <----------

Quelle

2017-03-01 06:36:43 mvermand

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

Quelle

2017-03-01 06:43:26 Abi

Keine der vorhandenen Antworten scheint Ihr tatsächliches Problem zu adressieren, das ist die Reihenfolge der Ausführung.

Der Grund Ihrer onload="startTimer(…)" Ereignis nicht funktioniert, dass das Skript selbst gesetzt auszuführen ‚onLoad‘, so onload="…" feuert, bevor das Skript ausgeführt wurde, was bedeutet, startTimer noch nicht definiert ist.

durch die 'Lastart' JavaScript Wechsel zu "Keine wrap - in < body>" (siehe http://imgur.com/79p4wO6), können Sie die onLoad= Attribut so, wie Sie verwenden erwarten:

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

Quelle

2017-03-01 06:53:39 Cauterite

Es ist jetzt sehr sinnvoll, warum mein Code nicht in jsfiddle lief und im SO-Snippet lief. Ich habe einen anderen Ansatz verwendet, indem ich meinen eigenen HTML-Code geschrieben habe. Ich habe festgestellt, dass ich einen Syntaxfehler undefinierte Variable hatte, aber am wichtigsten ist, wie Sie bereits erwähnt haben, dass die Ausführung ausgeführt wird. Abgesehen von der No wrap musste ich die nach der bevor es richtig funktionierte – TwoThumbSticks

ja, gut "No wrap - in < body >" tut genau das; Es platziert das Skript am Ende des Körpers, so dass es fast am Ende der Dokumentanalysephase ausgeführt wird. Es ist eine Schande, dass Sie darüber nachdenken müssen, während Sie immer noch versuchen, die Sprache zu lernen; Das ist die unglückliche Natur der javascript crafty ereignisgesteuerten APIs – Cauterite

Wenn der Browser die HTML-Seite von oben nach unten rendert, wird Ihr Javascript gerendert, nachdem der Body-Inhalt geladen wurde. Das Body - Onload - Ereignis kann daher Ihre startTimer - Methode nicht aufrufen, da sie auf der Seite noch nicht verfügbar ist.

Sie können Ihre starttimer (5,0) rufen zum Ende des Skripts bewegen.

Quelle

2017-03-01 07:00:16 Sudharsan

Javascript Zählerfunktion onload funktioniert nicht

Antwort

Verwandte Themen