I'm learning js. I want to make an alarm clock app. Currently I'm working on setting the time. I created buttons that increment and decrement the hour. I want to decrement below zero to 23. I also want to stop the increment at 23 and then continue with 0. Can anyone help me? If someone tells me the first part of the condition, I'll be able to figure out the other part.

let myHour = document.querySelector(".hours");
let myHourConverted = Number(myHour.innerText);
const hourDecrementBtn = document.querySelector(".hour-decrement");
const hourIncrementBtn = document.querySelector(".hour-increment");

hourDecrementBtn.addEventListener("click", decrementHour);

function decrementHour() {
  let hourDecrement = --myHourConverted;
  myHour.innerText = hourDecrement;

  if (hourDecrement < 0) {
    hourDecrement = 23;
  }
}

hourIncrementBtn.addEventListener("click", incrementHour);

function incrementHour() {
  let hourIncrement =   myHourConverted;
  myHour.innerText = hourIncrement;
  if (hourIncrement > 23) {
    hourIncrement = 0;
  }
}

<div >
  <span >00</span>
  <div >
    <button >&lang;</button>
    <button >&rang;</button>

CodePudding user response：

The problem is that when you make the change to decrement or increment from 23 to 0, you change the content of hourIncrement but not of myHourConverted, I leave you a small solution.

const myHour = document.querySelector(".hours");
let myHourConverted = Number(myHour.innerText);

const hourDecrementBtn = document.querySelector(".hour-decrement");
const hourIncrementBtn = document.querySelector(".hour-increment");

function decrementHour() {
    if (--myHourConverted < 0) myHourConverted = 23;
    myHour.innerText = myHourConverted;
}

function incrementHour() {
    if (  myHourConverted > 23) myHourConverted = 0;
    myHour.innerText = myHourConverted;
}

hourDecrementBtn.addEventListener("click", decrementHour);
hourIncrementBtn.addEventListener("click", incrementHour);

<div >
  <span >00</span>
  <div >
    <button >&lang;</button>
    <button >&rang;</button>
  </div>
</div>