Pomodoro Clock: getting the arrow buttons to work

Pomodoro Clock: getting the arrow buttons to work
0

#1

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;
});


#2

Where is numberUp set to a numeric value?


#3

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().


#4

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;
});

#5

set numberUp.innerText instead.


#6

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;
});

#7

You have this flipped.


#8

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.


#9

Sorry, should have been more clear in that…


#10

I made a mistake. numberUp is a string. What DOM element do you want to update the innerText property of? Think about it.


#11

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;
});

#12

You seem not to understand how to assign a value to something else. The part on the right side of the = is the value you are assigning to what is on the left side of the =. You need to assign numberUp to the innerText property of a span element. Which variable or DOM reference in your code represents the span element?


#13

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?


#14

No it is not. You set numberUp to be the break-length ID element’s innerText property value.


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

I added an extra variable above. See if you can fill in the ???.


#16

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.


#17

Only DOM elements have innerText properties, so I created a variable to reference the span (id=“break-length”) to be able to first get it’s innerText to assign to numberUp and then also to reference it later in the click callback function where numberUp needs to be assign to the span’s innerText property.

It could have been done without the extra variable, but then the code is not DRY (Do Not Repeat Yourself) as it could be and it makes it more readable with the extra variable. See below how it could have been done with the extra variable.

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

#18

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


#19

FYI - a shortcut to converting a string to a number is to add + right before the string. I could have written the following line:

var numberUp= parseInt(breakLengthElem.innerText);

instead as:

var numberUp= +breakLengthElem.innerText;

Note there is no space between the + and the string.

The main advantage of using parseInt, is when you want to make sure the string is converted to an integer value vs. just a number which could be a floating point number.


#20

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