I have a counter in span tag
s, when I press Start
the timer starts counting and when pressing Pause
it is stopped. Now the question is, How do I pass the value from the counter to input tag
when Pause
clicked?
<span id="min">00</span>:<span id="sec">00</span> <input id="startButton" type="button" value="Start"> <input id="pauseButton" type="button" value="Pause">
Script
<script> const Clock = { totalSeconds: 0, start: function () { if (!this.interval) { const self = this; function pad(val) { return val > 9 ? val : "0" + val; } this.interval = setInterval(function () { self.totalSeconds += 1; document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60)); document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60)); }, 1000); } }, pause: function () { clearInterval(this.interval); delete this.interval; }, }; document.getElementById("startButton").addEventListener("click", function () { Clock.start(); }); document.getElementById("pauseButton").addEventListener("click", function () { Clock.pause(); }); </script>
Here it is as a runnable snippet:
const Clock = { totalSeconds: 0, start: function() { if (!this.interval) { const self = this; function pad(val) { return val > 9 ? val : "0" + val; } this.interval = setInterval(function() { self.totalSeconds += 1; document.getElementById("min").innerHTML = pad(Math.floor(self.totalSeconds / 60 % 60)); document.getElementById("sec").innerHTML = pad(parseInt(self.totalSeconds % 60)); }, 1000); } }, pause: function() { clearInterval(this.interval); delete this.interval; }, }; document.getElementById("startButton").addEventListener("click", function() { Clock.start(); }); document.getElementById("pauseButton").addEventListener("click", function() { Clock.pause(); });
<span id="min">00</span>:<span id="sec">00</span> <input id="startButton" type="button" value="Start"> <input id="pauseButton" type="button" value="Pause">
Advertisement
Answer
I adjustment your script with template string javascript created with a variable time and improvement your double tags for a tag with id “time-span” and “time-input” both with return variable time Also in Clock inserted pad function property and acess inside start with self variable
See this code and working
Update
Improvement with new input time last show time after pause.
const Clock = { totalSeconds: 0, time: null, pad: function (val) { return val > 9 ? val : "0" + val; }, start: function () { const self = this; if (!self.interval) { self.interval = setInterval(function () { self.totalSeconds += 1; let min = self.pad(Math.floor(self.totalSeconds / 60 % 60)); let sec = self.pad(parseInt(self.totalSeconds % 60)); self.time = `${min}:${sec}`; document.getElementById("time-span").innerHTML = self.time; document.getElementById("time-input").value = self.time; }, 1000); } }, createInputResult: function () { const self = this; let input = document.createElement('input'); let line = document.createElement('hr'); input.id = 'time-result'; input.type = 'text'; input.value = self.time; document.getElementById("pauseButton").insertAdjacentElement('afterend', input); document.getElementById("pauseButton").insertAdjacentElement('afterend', line); }, pause: function () { const self = this; clearInterval(self.interval); delete self.interval; self.createInputResult(); }, }; document.getElementById("startButton").addEventListener("click", () => Clock.start() ); document.getElementById("pauseButton").addEventListener("click", () => Clock.pause() );
<!-- Times --> <span id="time-span">00:00</span> <input id="time-input" type="text" value="00:00"> <!-- Controls --> <input id="startButton" type="button" value="Start"> <input id="pauseButton" type="button" value="Pause">