0

Подскажите пожалуйста, как задать время таймера с помощью кнопки? Таймер написан, время задаю в коде. Есть также три картинки. Необходимо изменять (задавать) время таймера в зависимости от выбора картинки. То есть, если пользователь выбирает первую картинку, то таймер одна минута, вторую - две минуты и т.д.
Сам таймер запускается через отдельную кноку старт.

Код таймера:

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 на все три кнопки - не срабатывает.

7
  • По событию onClick вызывать функцию с таймером. В чем именно возникли сложности? Покажите HTML разметку и код, с которым возникли сложности
    – SwaD
    21 фев в 22:52
  • Задаю время через переменную let timer = 0.1; let amountTime = timer * 60; Надо, чтоб время выбиралось из этих кнопок <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>
    – Danil
    21 фев в 22:59
  • Мне надо привязать событие "клик по кнопке" к переменной timer . причем кнопок три и у каждой разное время
    – Danil
    21 фев в 23:02
  • Отредактируйте свой вопрос и укажите это все там. Для редактирования, нажмите кнопку "Править". Возможно этот ответ поможет в вашем вопросе
    – SwaD
    21 фев в 23:16
  • Исправил. Надеюсь, стало понятнее.
    – Danil
    22 фев в 0:34

1 ответ 1

0

Можно сделать таким образом..

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 btns = document.querySelectorAll("button");
btns.forEach(btn => btn.addEventListener('click', startTimer));

function startTimer(e) {
let btn = e.target
console.log('countdown!', btn);
amountTime = btn.value * 60;
  setInterval(calculateTime, 1000);
} 
<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 id="countdown">00:00</div>
</div>

1
  • Супер! То, что надо. Спасибо огромное.
    – Danil
    22 фев в 14:12

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.