Кликер обратного отсчета - JS
Я совершенно не понимаю, с чего начать, как мне создать кнопку обратного отсчета, чтобы каждый раз, когда моя кнопка нажимается, она распечатывает глобальную переменную и уменьшает ее на 1 в innerHTML, а когда она достигает 0, она говорит БУМ ?
Я знаю, что должен объявить переменную снаружи, но не уверен, что делать потом
JS:
var i = 20
function myFunction()
{
i = i--; // the value of i starting at 20
}
HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset = "utf-8">
<title> Task 6 </title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<script src = "task6.js" type = "text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id = "box">
<p id = "mydata"> Count Down </p>
<p> <button onclick = "myFunction();"> Click </button></p>
</div>
</body>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Я предполагаю, что вы хотите показать переменный вывод и BOOM на <p id = "mydata"> Count Down </p>, если я ошибаюсь, поправьте меня. Итак, примерно так:
let i = 20;
const myData = document.querySelector("#mydata");
function myFunction() {
i = i - 1;
myData.textContent = i;
if (i === 0) {
myData.textContent = "BOOM!"
}
}
У вас почти все получилось, пропустили только части textContent и if. Если это то, чего вы хотели добиться. Если это не то, что вы искали, позвоните мне, и я могу исправить это. Ваше здоровье :)
Что ж, если вы хотите изменить innerHTML в <div id = "box">... </div>, тем самым вы удалите кнопку и не сможете щелкнуть по ней, потому что innerHTML изменяет HTML, записанный в элементе. Поэтому, если вы выполните document.querySelector("#box").innerHTML = TEXT HERE, он перезапишет HTML-код, который у вас есть для этого элемента box, и вы потеряете кнопку, поэтому не сможете щелкнуть ее после первой.
Вам нужен способ отображения числа внутри вашей переменной. Один из самых простых способов сделать это - установить текст в тег абзаца с помощью getElementById () и внутреннего HTML. Например, после запуска вашего деинкремента в следующей строке вы должны сделать что-то вроде ...
function myFunction()
{
i = i--; // the value of i starting at 20
document.getElementById("mydata").innerHTML = i;
}
Этот код просто берет ваш абзац «mydata» из DOM и вставляет номер в тег как html.
На самом деле, здесь нет необходимости в innerHTML. textContent лучше бы.
Я бы не сказал, что textContent лучше. innerHTML позволит вам вводить стили и другую разметку, где textContent позволяет вводить только простой текст. Я думаю, что лучше познакомиться с innerHTML, он немного более надежен и с современными браузерами мало что знает о разнице в производительности.
Речь идет о добавлении текста в элемент - лучше textContent. И если вы собираетесь добавить HTML в DOM в наши дни, insertAdjacentHtml предпочтительнее innerHTML.
Я попробовал этот код и отлично работает
var i = 20;
function myFunction() {
myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if (i <= 0) {//with <=0 the user if click again,after zero he sees only BOOM
myData.textContent = "BOOM!"
}
}
HTML-код
<!DOCTYPE html>
<html lang = "en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset = "utf-8">
<title> Task 6 </title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<script src = "task6.js" type = "text/javascript"></script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id = "box">
<p id = "mydata"> Count Down </p>
<p> <button onclick = "myFunction();"> Click </button></p>
</div>
<!DOCTYPE html>
<html lang = "en">
<head>
<!-- link to external JS file. Note that <script> has an
end </script> tag -->
<meta charset = "utf-8">
<title> Task 6 </title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<script type = "text/javascript">
var i = 20;
function myFunction() {
var myData = document.getElementById("mydata");
i = i - 1;
myData.textContent = i;
if (i <= 0) {
myData.textContent = "BOOM!"
}
}
</script>
</head>
<body>
<!-- Create a paragraph with id mydata -->
<div id = "box">
<p id = "mydata"> Count Down </p>
<p> <button onclick = "myFunction();"> Click </button></p>
</div>
</body>
</html>Хорошая практика - не встраивать JS в HTML, поэтому я приведу дополнительный пример, чтобы показать, как разделить его с помощью пары методов выбора DOM:
let count = 20;
// grab the element with the mydata id
const mydata = document.getElementById('mydata');
// grab the button and attach an click event listener to it -
// when the button is clicked the `handleClick` function is called
const button = document.querySelector('button');
button.addEventListener('click', handleClick, false);
function handleClick() {
if (count === 0) {
mydata.textContent = 'Boom';
} else {
mydata.textContent = count;
}
count--;
}<body>
<p id = "mydata">Countdown</p>
<button>Click</button>
<script src = "task6.js" type = "text/javascript"></script>
</body>Ссылка
Поэтому, когда я попытался добавить код, мой блок INNERHTML отображает 20, но не вычитается на 1 даже после нажатия
Нажмите F12 и посмотрите, появляются ли ошибки в консоли разработчика.
Вместо этого я сделал код немного проще для понимания с помощью оператора if/else.
И последнее: если ваш код находится в task6.js, переместите следующую строку непосредственно перед </body>: <script src = "task6.js" type = "text/javascript"></script>. Таким образом, DOM загрузится первой, а затем ваш код сможет подобрать элементы. Я добавил это в HTML-код в ответе.
Хороший. Я считаю также хорошей практикой не использовать глобальные переменные, поэтому, вероятно, вы сможете справиться с обратным отсчетом, получив текущее значение в «mydata» и вычитая внутри события щелчка. parseInt (document.getElementById ("mydata"). innerHTML) - 1
обалденно спасибо, Энди! Я новичок в JS, поэтому хочу узнать как можно больше, но работал!
Я пытаюсь отобразить его в innerHTML (поле обратного отсчета), так что при нажатии кнопки обратный отсчет начинается с 20, затем снова щелкает и идет 19,18,17 ... и т. д. До 0 и отображает БУМ