Skip to content
Advertisement

pass value from span tag to input tag

I have a counter in span tags, 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">
Advertisement