Estoy aprendiendo js. Quiero hacer una aplicación de despertador. Actualmente estoy trabajando en la configuración de la hora. Creé botones que incrementan y decrementan la hora. Quiero disminuir por debajo de cero a 23. También quiero detener el incremento en 23 y luego continuar con 0. ¿Alguien puede ayudarme? Si alguien me dice la primera parte de la condición, podré descifrar la otra parte.
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 class="timer-hours-container">
<span class="hours">00</span>
<div class="hours-buttons-container">
<button class="hour-decrement timer-button">⟨</button>
<button class="hour-increment timer-button">⟩</button>
El problema es que cuando haces el cambio de decremento o incremento de 23 a 0, cambias el contenido de hourIncrement pero no de myHourConverted, te dejo una pequeña solución.
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 class="timer-hours-container">
<span class="hours">00</span>
<div class="hours-buttons-container">
<button class="hour-decrement timer-button">⟨</button>
<button class="hour-increment timer-button">⟩</button>
</div>
</div>