Как присвоить значение переменной в зависимости от выбранного пункта?

Question

[Александр]

Я практикую JavaScript, делая свой Pomodoro таймер. Там предусмотрено 3 пункта: сам таймер (25 мин.), короткий перерыв (5 мин.) и долгий перерыв (15 мин.), вот как здесь.
Мне нужно сделать так, чтобы переменной, которая отвечает за стартовое время, присваивалось значение в зависимости от того, какую вкладку выбрал пользователь. Вот мой код:

HTML:

<section class="focus-container">
                <div class="focus-buttons">
                    <button type="button" class="btn focus-btn active">Focus</button>
                    <button type="button" class="btn short-break-btn">Short Break</button>
                    <button type="button" class="btn long-break-btn">Long Break</button>
                </div>
    
                <div class="countdown"></div>
    
                <button type="button" class="start-btn">Start</button>
            </section>

Первый JavaScript, который просто добавляет класс active выбранной вкладке:

const buttons = document.getElementsByClassName('btn');

for(let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', function(event) {
        highlightTab(event);
    })
}

function highlightTab(event) {
    for (i = 0; i < buttons.length; i++) {
        buttons[i].className = buttons[i].className.replace(' active', '');
    }

    event.currentTarget.className += ' active';
}

И второй JavaScript, основной:

// Получаю элементы с HTML страницы
const countdownTimer = document.querySelector('.countdown');
const focusButton = document.querySelector('.focus-btn');
const shortBreakButton = document.querySelector('.short-break-btn');
const longBreakButton = document.querySelector('.long-break-btn');

// Вот здесь мне нужно не присваивать 25, а присваивать такое значение, которое предусмотрено выбранной вкладкой
let startingMinutes = 25;
let time = startingMinutes * 60;

// И здесь setInterval и сама функция (в ней нет ничего особого)
let timer = setInterval(calculateTime, 1000);

function calculateTime() {
    let minutes = Math.floor(time / 60);
    let seconds = time % 60;

    if(time < 0) {
        clearInterval(timer);
        alarm.play();
        return;
    }

    if(minutes < 10) {
        minutes = '0' + minutes;
    }

    if(seconds < 10) {
        seconds = '0' + seconds;
    }

    countdownTimer.textContent = minutes + ':' + seconds;
    time--;
}

Я немного забрал кода, чтобы легче было читать. В общем, как мне стартовое время изменить при выборе какой-либо вкладки? Помогите разобратся, пожалуйста.

Answer 1

[Spaceoddity]

Вы ставите обработчики клика на кнопки (функция highlightTab). В этой функции вы навешиваете класс. Ну вот и добавьте сюда любые изменения вашей переменной. Можете в кнопках через data-атрибуты его прописать и считывать при клике. Можете соответствие классов переменным сделать. Вариантов много. Самое главное - вам нужно событие по которому вы будет менять переменную. Это событие у вас - клик. Так что в обработчике клика и производите любые нужные вам манипуляции.

Как-то так:

<button type="button" class="btn focus-btn active" data-timer-val="5">Focus</button>
<button type="button" class="btn short-break-btn" data-timer-val="25">Short Break</button>
<button type="button" class="btn long-break-btn" data-timer-val="45">Long Break</button>

let startingMinutes = document.querySelector(".btn.active").dataset.timerVal;
//...
function highlightTab(event) {
    for (i = 0; i < buttons.length; i++) {
        buttons[i].className = buttons[i].className.replace(' active', '');
    }

    event.currentTarget.className += ' active';
    startingMinutes = event.currentTarget.dataset.timerVal;
}

Comments

[Kentavr16]

А еще можно redux запилить для управления состояниями программы
)

[ThunderCat]

Kentavr16, А еще прикрутить базу данных, и на го бэкенд, и на сфинксе поиск по задачам... Только зачем?

[Kentavr16]

Шутки шучу. Ваш ответ абсолютно адекватен.