Увеличение кнопки HTML в JS
Я делаю 10 дней JS на Hackerrank, и я застрял на 9-м дне, когда вам нужно сделать кнопку, и при каждом нажатии она увеличивает число на кнопке на единицу. Я написал этот код, но похоже, что он ничего не делает. Кнопка выглядит нормально, но onclick не работает. Я также хочу сделать это, не записывая что-то вроде onclick = "increment ()" в html-коде, потому что я уже могу это сделать. Чтобы проверить свой код, я зашел на w3schools.com, нашел случайный тест и заменил код своим:
var btn = document.getElementById('btn');
var i = 0;
btn.onclick = function() {
i++;
btn.innerHTML = i;
};.btnClass {
width: 96px;
height: 48px;
font-size: 24px;
background: #4FFF8F;
}<h2>The Button Element</h2>
<button id = "btn" class = "btnClass">0</button>Разве в консоли JavaScript не появляется ошибка? Это могло дать вам ключ к разгадке проблемы.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Ваш JavaScript анализируется и выполняется до того, как ваша кнопка окажется на странице. Просто переместите свой скрипт ниже кнопки или прикрепите даже тот, который выполнит ваш код после загрузки страницы.
Ваш HTML и скрипт должны выглядеть так:
<!DOCTYPE html>
<html>
<style>
.btnClass {
width: 96px;
height: 48px;
font-size: 24px;
background: #4FFF8F;
}
</style>
<body>
<h2>The Button Element</h2>
<button id = "btn" class = "btnClass">0</button>
<script>
var btn = document.getElementById('btn');
var i = 0;
btn.onclick = function () {
i++;
btn.innerHTML = i;
};
</script>
</body>
</html>
Ух ты, ты спасатель, я мог бы поклясться, что пробовал это. Возможно, у меня были какие-то ошибки, которые я удалил, пытаясь решить проблему.
Добро пожаловать, друг мой, это случается со всеми нами.
Я смотрю по этой ссылке: https://www.w3schools.com/jsref/event_onclick.asp
Я думаю, что идентификатор внутри вашей кнопки должен быть событием onclick.
Надеюсь это поможет.
он уже использует событие onclick. пожалуйста, сначала прочтите код
Ваш Javascript обрабатывался до ваш HTML был загружен в DOM (объектная модель документа) из-за того, что вы поместили свой JS перед своим HTML ...
Вы можете переключить это как ответ от Senad, однако ... более безопасный способ выполнить Javascript, который манипулирует DOM, - подождать, пока DOM не будет полностью загружен.
Ниже приведен код, который устраняет вашу проблему путем прослушивания события DOMContentLoaded и будет работать независимо от того, где вы загружаете свой Javascript.
document.addEventListener('DOMContentLoaded', function(){
console.info("DOM Loaded");
//Wait to add event listeners until the DOM is fully loaded. This is needed
// when wanting to access elements that are later in the HTML than the <script>.
var btn = document.getElementById('btn');
var i = 0;
btn.addEventListener('click', function(el) {
i++;
btn.innerHTML = i;
console.info("clicked")
});
});
Если вы хотите сохранить свой JS в голове, вы также можете обернуть его в window.onload, чтобы все было в порядке.
<!DOCTYPE html>
<html>
<style>
.btnClass {
width: 96px;
height: 48px;
font-size: 24px;
background: #4FFF8F;
}
</style>
<script>
window.onload = function() {
var btn = document.getElementById('btn');
var i = 0;
btn.onclick = function () {
i++;
btn.innerHTML = i;
};
}
</script>
<body>
<h2>The Button Element</h2>
<button id = "btn" class = "btnClass">0</button>
</body>
</html>
С window.onload ваш js "увидит" вашу кнопку, потому что страница полностью загружена.
Вам нужно переместить сценарий в нижнюю часть
bodyили запустить его в обработчике «готовый документ». Проблема в том, что, поскольку сценарий находится в файле выше, чем там, где определена кнопка, он еще не существует в документе, когда сценарий анализирует и выполняет.