Подскажите пожалуйста, как задать время таймера с помощью кнопки?
Таймер написан, время задаю в коде. Есть также три картинки. Необходимо изменять (задавать) время таймера в зависимости от выбора картинки. То есть, если пользователь выбирает первую картинку, то таймер одна минута, вторую - две минуты и т.д.
Сам таймер запускается через отдельную кноку старт.
Код таймера:
let timer = 0.1;
let amountTime = timer * 60;
function calculateTime (){
const countdown = document.querySelector("#countdown");
let minutes = Math.floor(amountTime/60);
let seconds = amountTime%60;
if (seconds < 10){
seconds = "0" + seconds;
}
if (minutes < 10){
minutes = "0" + minutes;
}
countdown.textContent = `${minutes}:${seconds}`;
amountTime--;
if (amountTime < 0) {
stopTimer();
amountTime = 0;
}
function stopTimer(){
clearInterval();
}
}
const btn = document.querySelector("#btn");
btn.addEventListener('click', startTimer);
function startTimer () {
setInterval(calculateTime,1000);
}
Мне нужно переменную timer задавать через выбор картинки (нажатие кнопки) пользователем.
Код кнопок в HTML:
<div id="container">
<div id="buttons">
<button id="button1" value="5">SOFT-BOILED</button>
<img src="Picture1.jpg" alt="">
</div>
<div id="buttons">
<button id="button2" value="6">MEDIUM-BOILED</button>
<img src="Picture2.jpg" alt="">
</div>
<div id="buttons">
<button id="button3" value="7">HARD-BOILED</button>
<img src="Picture3.jpg" alt="">
</div>
</div>
Ставлю addEventListener на все три кнопки - не срабатывает.