Pomodoro Clock: getting the arrow buttons to work

I´m trying to use JS to get the arrow buttons to increment and decrement. I keep getting a NaN value, and I have no idea how to convert it to a number in order to make it possible for the function to work. Any ideas?

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Pomodoro Clock</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="Pomodoro Clock.css">
</head>

<body>
<div id="buttons">
	<h1>Pomodoro Clock</h1>
	<p id="break-label">Break Length</p>
	<div id="control-buttons">
		<i class="fas fa-arrow-up" id="break-increment"> <span id="break-length">5</span></i>
        <i class="fas fa-arrow-down" id="break-decrement"></i>
        </div>
	<p id="session-label">Session Length</p>
	<div id="session-buttons">
		<i class="fas fa-arrow-up" id="session-increment"><span id="session-length">25</span></i>
		<i class="fas fa-arrow-down" id="session-decrement"></i>
	</div>
	</div>

<div id="container">
	<p id="timer-label">Session</p>
	<p id="session-length"><span id="time-left">25</span></p>
		<div id="start_stop">
		<i class="fas fa-play"></i>
		<i class="fas fa-stop"></i>		
	</div>
	<i class="fas fa-sync-alt" id="reset"></i>
<script src="Pomodoro Clock.js"></script>

</body>
</html>

JS:
var breakButton= document.getElementById(“break-increment”);
var numberUp= document.getElementById(“break-length”);
breakButton.addEventListener(“click”, function(){
numberUp++;
console.log(numberUp)
numberUp.textContent=numberUp;
});

Where is numberUp set to a numeric value?

1 Like

Your line

numberUp++;

is incrementing numberUp, which is a DOM node. You want to get the innerText of that (maybe), and parse the number out of that, maybe with parseFloat() or parseInt().

1 Like

Thank you for the reply. I did what you said, and now I´m getting the correct numbers on the console. But textContent doesn´t seem to be writing the new values. Any ideas?

var breakButton= document.getElementById("break-increment");
var numberUp= document.getElementById("break-length").innerText;
breakButton.addEventListener("click", function(){
numberUp++;
console.log(numberUp)
numberUp.textContent=numberUp;
});

set numberUp.innerText instead.

1 Like

Still won´t work. To make matters worse, now I´m getting a correct value (the first time = 6) and after that a NaN. I´m getting because after setting InnerText the value becomes a string and thus can´t be added up. Any thoughts? Sorry for being so annoying.

var breakButton= document.getElementById("break-increment");
var numberUp= document.getElementById("break-length").innerText;
breakButton.addEventListener("click", function(){
numberUp++;
console.log(numberUp)
numberUp=numberUp.innerText;
});

Thank you. I flipped it, but it STILL doesn´t update the value when I click on the page. I´m starting to feel cursed lol.

Sorry, should have been more clear in that…

Of the span element, of course. I´m guessing type coersion is an issue here, so I parsed the value of numberUp to an Int. Now I´m getting a correct value (the first time = 6) and after that a NaN. And it still won´t update the value.

var breakButton= document.getElementById("break-increment");
var numberUp= parseInt(document.getElementById("break-length").innerText);
breakButton.addEventListener("click", function(){
numberUp++;
console.log(numberUp)
numberUp=numberUp.innerText;
});

The numberUp variable is set to the “break-length” ID element which is the span element in the HTML. Shouldn´t it get its value updated after numberUp=numberUp.innerText happens?

Thank you. Now it works. I am confused though: why did you have to add that extra variable? I´m trying to understand the reasoning behind it.

That comparison side by side made the “click” I needed in my head. Thank you so much for the help and the clear explanation.

These tips are so valuable when it comes to saving time. Thank you so much.