Issue with my javascript code. the click event is ot running and I don't know why. Can someone please help me out?

[Ireoluwadev]

//comment in javascript

const counterEl = document.querySelector('.counter'); const increaseButtonEl = document.querySelector('.counter__button--increase'); const decreaseButtonEl = document.querySelector('.counter__button--decrease'); const resetButtonEl = document.querySelector('.counter__reset-button '); const counterValueEl = document.querySelector('.counter__value');

resetButtonEl.addEventListener('click', function(){ // set counter value to 0 counterValueEl.textContent = 0; });

decreaseButtonEl.addEventListener('click', function(){ // get current value on the counter const currentValue = counterValueEl.textContent;

//convert the value to number type
const currentValueAsNumber = + currentValue;

//decrement by 1
let newValue = currentValueAsNumber - 1;

// check if new value is less than 1
if (newValue < 0){
    //if it is, force it to be 0 instead
    newValue = 0;  //this was the case before the change was made....this will not work because newValue is a constant variable.
  // it will not work because it has been assigned to something else in the same function block.
  // the way out is to change the const keyword to let
}

//update counter value with new value

counterValueEl.textContent = newValue;

});

increaseButtonEl.addEventListener('click', function(){

})

function incrementCounter(){ //get current value of counter const currentValue = counterValueEl.textContent;

//convert value to number type const currentValueAsNumber = +currentValue; //the + sign before the currentValue is a unary operator // making it to convert from string type to number type //meaning 0 is converting from string type to number type //increment by 1

// const newValue = currentValueAsNumber + 1; //now, currentValueAsNumber is a number type //plus one; the newValue would then be a number type //set counter element with new value // counterValueEl.textContent = newValue; //increment by 1 let newValue = currentValueAsNumber + 1;

//check if new value is greater than 5
 if (newValue > 5){
  // if it is, force it to be 5
  newValue = 5;

  // give visual indicator that limit has been reached
  counterEl.classList.add('counter--limit');

} }

increaseButtonEl.addEventListener('click', incrementCounter);

document.addEventListener('keydown', incrementCounter); //keydown is when you instantly start pressing a key //while keyup is when you let go of the key

//it is noticed that the functions for the decrement and increment have the same variable names... //the variables declared in the decrement and increment functions only execute within their function scope //i.e within the function which each was declared.. //therefore, the various variables declared function differently in the function they are scoped in.

//const clickHandler = () =>{ // console.log('Helllo'); // console.log(2); //}

//OR (TEACHER'S METHOD) //this type of function is called anonymous function. it doesnt need to be named because it will not be used anywhere else in JavaScript code //increaseButtonEl.addEventListener('click', function(){ // console.log('Helllo'); // console.log(2); //}) //increaseButtonEl.addEventListener('click', clickHandler );

//DRI DON'T REPEAT YOURSELF IN PROGRAMMING.

//my practice before continuing the video based on the understanding of the increment button //const decreaseButtonEl = document.querySelector('.counter__button--decrease'); //decreaseButtonEl.addEventListener('click', function(){ //get current value of counter // const currentValue = counterValueEl.textContent;

//convert value to number type // const currentValueAsNumber = +currentValue; //the + sign before the currentValue is a unary operator // making it to convert from string type to number type //meaning 0 is converting from string type to number type //increment by 1

// const newValue = currentValueAsNumber - 1; //now, currentValueAsNumber is a number type //plus one; the newValue would then be a number type //set counter element with new value //counterValueEl.textContent = newValue; //})