Function setting html element equal to another html element that increments/ decrements only works on page load

JavaScript
1

I made a plus and minus button that increases or decreases the value of a span element, called sessionNumber, in my html. I have another value that I named time that I want to equal sessionNumber whenever it changes. In my current code the innerHTML of time only equals sessionNumber when the page loads, but when I increase or decrease sessionNumber time doesn’t change. I would appreciate any help in fixing this. Here is my code and a link to a pastebin: https://pastebin.com/xxSZN0fp

let session = true;
 
const time = document.querySelector('#time');
 
const breakPlus = document.querySelector('.plus-b');
 
const breakMinus = document.querySelector('.minus-b');
 
const breakNumber = document.querySelector('.number-b');
 
sessionPlus.addEventListener('click', plusSession);
 
sessionMinus.addEventListener('click', minusSession);
 
function plusSession(){
  plusOne = sessionNumber.innerHTML;
  plusOne++;
  sessionNumber.innerHTML = plusOne;
}
 
function minusSession(){
  minusOne = sessionNumber.innerHTML;
  minusOne--;
  if(minusOne === -1){
    return;
  }
  sessionNumber.innerHTML = minusOne;
}
function sessionTime(){
  if(session === true){
    time.innerHTML = sessionNumber.innerHTML;
  }
}
sessionTime();
2

It would help if you could provide all of your code and not just the JavaScript. There are plenty of online editors such as Codepen, Plunkr, and JSBin that would work better than just pastebin.

That said, the issue may be that the value you get from innerHTML is a string while ++ operates on numbers. Try coercing the value with Number():

var minusOne = Number(sessionNumber.innerHTML); // don't forget your var declaration keyword!
minusOne--;

Side note: I find that ++ and -- tend to introduce bugs into my code, so I avoid them. I won’t say that I never use them, but only rarely. You may find that writing out more code makes it more readable and easier to debug. Definitely not a rule, but food for thought.

3

https://codepen.io/icewizard/pen/KQaGJe here is a link to my codepen. I think I’ll keep the – and ++ now unless I break my code, I’ll remake it in the future.

EDIT: adding Number or parsing the int on sessionNumber doesn’t fix the issue. the inner HTML of time still only updates the sessionNumbers innerHTML on page load.

4

I see. I didn’t read your issue closely enough. You are expecting the session number in the middle to change, right?

5

Yes, I want the session number in the middle of the page with the time id to equal the html of what I set the sessionNumber to and to continue equaling it when I increase or decrease its value, I’m not sure why its only when the page first loads though and after it does nothing.

6

You don’t have any code that would change it. The function sessionTime only runs at page load. Call it at the end of your event handlers to change the value each time a button is clicked.

7

thanks this worked. easy fix