В вашем коде есть пара ошибок:
const timer = ... и timer -= 1. Да, вы не можете сделать это с переменной const. Используйте var timer = ... вместо const timer = ...document.getElementById('input').value. Откройте инспектор браузеров (что-то вроде ctrl + shift + I в Firefox или просто щелкните правой кнопкой мыши на своей веб-странице и выберите «Проверить ...»). На вкладке Консоль вы увидите, что такого элемента с таким ID: input нет. Измените тег <input ... на <input id='input' ..., чтобы это работало. - То же, что и выше, в консоли моего контрольного окна написано:
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', () => {
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;
...
Следующая ошибка консоли дает нам:
ReferenceError: countUp is not defined. Я думаю, что вы имели в виду:
setInterval(() => { вместо
countUp(() => {. Ваш обратный отсчет неверен:
remain.textContent = '${selectInput} Seconds Left'; (заменить 'обратными галочками, но я не знаю, как их избежать на языке разметки StackOverflows). Вы пытаетесь показать значение
selectInput, но это значение всегда будет одинаковым. Я думаю, что вы хотите показать значение
timer, потому что это то, что вы уменьшаете, только строкой раньше! Следующее, что произойдет, это то, что это значение будет NaN ... Кроме того,Ваш таймер уже начинает считать, даже когда кнопка не нажата. Чтобы решить эту проблему, переместите функцию
const time = setInterval(() => {....}) в обработчик событий кнопки. Сделайте то же самое с частью
if (selectInput === "") {...}. Это весь код, который должен выполняться только после нажатия кнопки.
Так что ваш окончательный код будет выглядеть так, если вы прослушали мои предыдущие пункты:
const button = document.getElementById("btn");
const remain = document.createElement('p');
var selectInput;
document.body.appendChild(remain);
const startGame = button.addEventListener('click', () => {
selectInput = document.getElementById('input').value;
remain.textContent = `${selectInput} Seconds Left`;
var timer = selectInput;
const time = setInterval(() => {
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:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1> presser</h1>
<input id="input" type="number" placeholder="Set Seconds"><br><br>
<button id="btn" type="button" value="click">Start!</button>
<script src="amitie.js"></script>
</body>
</html>
Работает, но код не очень красивый. Можно сделать гораздо больше улучшений, но если я собираюсь улучшить все это, вы не узнаете наш собственный код и то, что вы сделали неправильно. Для вашей цели сейчас это работает.
Попробуйте следовать некоторым учебникам по кодированию для JavaScript. Особенно о переменных сферах.