Как я могу начать тайм-аут, когда нажмите на кнопку в соответствии со значением моего поля ввода?

Как я могу запустить тайм-аут при нажатии кнопки в соответствии со значением моего поля ввода?

В вашем коде есть пара ошибок:

  1. const timer = ... и timer -= 1 . Да, вы не можете сделать это с помощью переменной const . Используйте var timer = ... вместо const timer = ...
  2. document.getElementById('input').value . Откройте инспектор браузеров (что-то вроде ctrl shift I в Firefox или просто щелкните правой кнопкой мыши на своей веб-странице и выберите «Осмотреть …»). На вкладке Консоль вы увидите, что такого элемента с таким ID: input нет. Измените свой {amp}lt;input ... на {amp}lt;input id='input' ... чтобы это работало.
  3. Как и в случае ошибки выше, консоль моего контрольного окна сообщает: ReferenceError: selectInput is not defined . Вы используете selectInput в timer = selectInput , но он еще не определен. Да, это определено в вашем EventListener для кнопки, но это локальная область. За пределами этой области он не определен. Чтобы решить эту проблему, вы можете определить selectInput в верхней части вашего кода:
  ... const remain = document.createElement('p'); var selectInput; document.body.appendChild(remain); const startGame = button.addEventListener('click', () ={amp}gt; { selectInput = document.getElementById('input').value; // We don't need to define it here again, because we want to use the outer scope variable of selectInput remain.textContent = `${selectInput} Seconds Left`; }); var timer = selectInput; ... 
  1. Следующая консольная ошибка дает нам: ReferenceError: countUp is not defined . Я думаю, что вы имели в виду: setInterval(() ={amp}gt; { вместо countUp(() ={amp}gt; { .
  2. Ваш обратный отсчет неверен: remain.textContent = '${selectInput} Seconds Left'; (заменить ‘обратными галочками, но я не знаю, как избежать их на языке разметки StackOverflows). Вы здесь пытаетесь показать значение selectInput , но это значение всегда будет одинаковым. Я думаю, что вы хотите показать значение timer , потому что это тот, который вы уменьшаете, просто строка раньше!
  3. Следующее, что произойдет, это то, что это значение будет NaN … Кроме того, ваш таймер уже начинает считать, даже когда кнопка не нажата. Чтобы решить эту проблему, переместите функцию const time = setInterval(() ={amp}gt; {....}) в обработчик событий кнопки. Сделайте то же самое с if (selectInput === "") {...} . Это весь код, который должен выполняться только после нажатия кнопки.

Итак, ваш окончательный код будет выглядеть так, если вы прослушали мои предыдущие пункты:

  const button = document.getElementById("btn"); const remain = document.createElement('p'); var selectInput; document.body.appendChild(remain); const startGame = button.addEventListener('click', () ={amp}gt; { selectInput = document.getElementById('input').value; remain.textContent = `${selectInput} Seconds Left`; var timer = selectInput; const time = setInterval(() ={amp}gt; { console.log(time); timer -= 1; remain.textContent = `${timer} Seconds Left`; if (timer === 0) { clearInterval(time); remain.textContent = 'The end game'; } }, 1000); if (selectInput === "") { clearInterval(time); remain.textContent = 'enter in second' } }); 

И ваш HTML:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;h1{amp}gt; presser{amp}lt;/h1{amp}gt; {amp}lt;input id="input" type="number" placeholder="Set Seconds"{amp}gt;{amp}lt;br{amp}gt;{amp}lt;br{amp}gt; {amp}lt;button id="btn" type="button" value="click"{amp}gt;Start!{amp}lt;/button{amp}gt; {amp}lt;script src="amitie.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Это работает, но код не очень хорош. Можно сделать гораздо больше улучшений, но если я собираюсь все это улучшить, то вы не узнаете наш собственный код и то, что вы сделали неправильно. Для вашей цели сейчас это работает.

Попробуйте следовать некоторым учебникам по кодированию для JavaScript. Особенно о переменных сферах.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector