Add value from textbox to counter

Question

I'm learning javascript and I want to create a simple clock. I want for user to be able to change minutes by entering a number in textbox and pressing a button, so when that number is displayed and when the seconds are counted to 60, that displayed number increase by 1, my code won't work, help pls:

var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");

function incrementSeconds() {
  seconds += 1;
  if (seconds === 60) {
    return seconds = 0;
  }
  el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);

dugme.addEventListener("click", function() {
  var minutes = parseInt(document.querySelector("#value").value);
  el2.innerText = minutes;
})

function incrementMinutes() {
  minutes2 += 1;
  if (minutes2 === 60) {
    return minutes2 = 0;
  }
  rezultat = (seconds + minutes2 + minutes);
  el2.innerText = rezultat;
}

var cancel = setInterval(incrementMinutes, 60000);

<form>
  <input type="text" id="value">
  <button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>

you have 2 </form> why ?

Mister Jojo
– Mister Jojo

2021-01-24 17:29:28 +00:00
Commented Jan 24, 2021 at 17:29 — Mister Jojo
– Mister Jojo, Commented Jan 24, 2021 at 17:29

clod9353 · Accepted Answer · 2021-01-24 17:38:57Z

You have a few problems in your code. The main mistake is that your variable minutes is not defined in the function incrementMinutes() where you are trying to use it. You have to calculate it again.

Other improvements that you can make are:

Remove the return in your incrementSeconds and incrementMinutes function
Have only 1 setInterval, and call incrementMinutes when seconds reach 60.

You can see a snippet here below:

var seconds = 0;
var minutes2 = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var el = document.getElementById("seconds-counter");
var el2 = document.getElementById("minutes-counter");

function incrementSeconds() {
  seconds += 1;
  if (seconds === 60) {
    seconds = 0;
    incrementMinutes();
  }
  el.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);

dugme.addEventListener("click", function() {
  var minutes = parseInt(document.querySelector("#value").value);
  el2.innerText = minutes;
})

function incrementMinutes() {
  minutes2 += 1;
  if (minutes2 === 60) {
    minutes2 = 0;
  }
  rezultat = (minutes2 + parseInt(document.querySelector("#value").value));
  el2.innerText = rezultat;
}

<form>
  <input type="text" id="value">
  <button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>

Aalexander · Accepted Answer · 2021-01-24 17:59:48Z

To show here the behavior I made a minute to 5 seconds.

As a formatting improvement, if you want to show in result min:sec you can do this

min = min < 10 ? "0"+min : min;
seconds = seconds < 10 ? "0" + seconds : seconds;

To build the string with leading zeros.

I have removed the returns because they were not neccessary you can inside reset the value there is no need to return it.

var seconds = 0;
var min = 0;
var rezultat;
let dugme = document.querySelector("#dugme");
var secCounter = document.getElementById("seconds-counter");
var mintCounter = document.getElementById("minutes-counter");

function incrementSeconds() {
  seconds += 1;
  if (seconds === 60) {
      seconds = 0;
  }
  secCounter.innerText = seconds;
}
var cancel = setInterval(incrementSeconds, 1000);



function incrementMinutes() {
  min += 1;
  if (min === 60) {
      min = 0;
  }
  tempMin = min;
  tempSec = seconds;
  min = min < 10 ? "0"+min : min;
  seconds = seconds < 10 ? "0" + seconds : seconds;
  rezultat = (min+":"+seconds);
  mintCounter.innerText = rezultat;
  min = tempMin;
  seconds = tempSec;
}

// for debugging to 5 sec
var cancel = setInterval(incrementMinutes, 5000);

dugme.addEventListener("click", function() {
  var inpMinutes = parseInt(document.querySelector("#value").value);
  min = inpMinutes;
  mintCounter.innerText = min;
})

<form>
  <input type="text" id="value">
  <button id="dugme" type="button">minuti</button>
</form>
<div id="seconds-counter"></div>
<div id="minutes-counter"></div>
</form>

Collectives™ on Stack Overflow

Add value from textbox to counter

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related