CODEWITHSUNDEEP
javascripthtml
Darko
Darko

Reputation: 47

Add value from textbox to counter

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>

Upvotes: 3

Views: 93

Answers (2)

Aalexander
Aalexander

Reputation: 5004

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>

Upvotes: 2

clod9353
clod9353

Reputation: 2002

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>

Upvotes: 3

Related Questions