[Solved] How to have a setInterval not act like a for loop [closed]

by


The problem is that you’re not parsing the input to a number. So when you do currTime += 33;, it’s concatenating strings instead of adding numbers. Use parseInt() when you read the inputs into the variables.

var currTime = 0
var origTime = 0
var timerFunc
var a = document.querySelector('#node1')
var i = 0
var md
var sd
var msd
var freq = 33;

function button1Action() {
  if (i === 0) {
    origTime = parseInt(document.getElementById("time").value)
    currTime = parseInt(document.getElementById("time").value)
    var b = a.cloneNode(true)
    b.id = 'node2'
    b.innerHTML = '<h1 id="text"></h1><button id="button1" class="button1" onclick="button1Action()">Start</button>&nbsp;<button id="button2" class="button2" onclick="button2Action()">Clear</button>'
    a.parentNode.replaceChild(b, a)
    let hd = Math.floor(currTime / 3600000)
    let m = Math.floor((currTime % 3600000) / 60000)
    let s = Math.floor((currTime % 60000) / 1000)
    let ms = Math.floor(currTime % 1000)
    if (m < 10) {
      md = `0${m}`
    } else {
      md = `${m}`
    }
    if (s < 10) {
      sd = `0${s}`
    } else {
      sd = `${s}`
    }
    if (ms < 10) {
      msd = `00${ms}`
    } else if (ms < 100) {
      msd = `0${ms}`
    } else {
      msd = `${ms}`
    }
    document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
  } else if (i >= 1 && (i % 2) == 1) {
    timerFunc = setInterval(function() {
      currTime += freq
      let hd = Math.floor(currTime / 3600000)
      let m = Math.floor((currTime % 3600000) / 60000)
      let s = Math.floor((currTime % 60000) / 1000)
      let ms = Math.floor(currTime % 1000)
      if (m < 10) {
        md = `0${m}`
      } else {
        md = `${m}`
      }
      if (s < 10) {
        sd = `0${s}`
      } else {
        sd = `${s}`
      }
      if (ms < 10) {
        msd = `00${ms}`
      } else if (ms < 100) {
        msd = `0${ms}`
      } else {
        msd = `${ms}`
      }
      document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
    }, freq)
    document.getElementById("button1").innerHTML = `Pause`
    document.getElementById("button1").style.backgroundColor = "#0000ff"
  } else if (i >= 1 && (i % 2) == 0) {
    clearInterval(timerFunc)
    document.getElementById("button1").innerHTML = `Cont..`
    document.getElementById("button1").style.backgroundColor = "#00ff00"
  } else {
    throw "Error: i must be a positive integer or 0"
  }
  i++
}

function button2Action() {
  clearInterval(timerFunc)
  currTime = origTime
  let hd = Math.floor(currTime / 3600000)
  let m = Math.floor((currTime % 3600000) / 60000)
  let s = Math.floor((currTime % 60000) / 1000)
  let ms = Math.floor(currTime % 1000)
  if (m < 10) {
    md = `0${m}`
  } else {
    md = `${m}`
  }
  if (s < 10) {
    sd = `0${s}`
  } else {
    sd = `${s}`
  }
  if (ms < 10) {
    msd = `00${ms}`
  } else if (ms < 100) {
    msd = `0${ms}`
  } else {
    msd = `${ms}`
  }
  document.getElementById("text").innerHTML = `${hd}:${md}:${sd}.${msd}`
  document.getElementById("button1").innerHTML = `Start`
  document.getElementById("button1").style.backgroundColor = "#00ff00"
  i = 1
}
.button1 {
  background-color: #00ff00;
  color: #999999;
}

.button2 {
  background-color: #ff0000;
  color: #eeeeee
}

.in1::placeholder {
  color: #000e;
}
<!DOCTYPE html>
<html>

<head>
  <title>Stopwatch</title>
</head>

<body id="node1">
  <input type="number" class="in1" id="time" placeholder="0" value="0">
  <br/><br/>
  <button class="button1" onclick="button1Action()">Set</button>
</body>

</html>

0

solved How to have a setInterval not act like a for loop [closed]