Функция onclick в JavaScript работает только один раз (очень простой код)
Я знаю, что есть много тем по этому поводу, но они затрагивают некоторые переменные проблемы. Мой намного проще, но он не работает. Работает только один раз.
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
document.body.innerHTML += '<div>welcome</div>';
}<body>
<button id = "bt1">Click me</button>
</body>Я попытался включить функцию clicked в оператор onclick и исключить ее (как предлагалось в некоторых других темах).
Я также попытался переместить объявление переменной bt1 (и вообще не использовать переменную).
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Всякий раз, когда вы назначаете innerHTML контейнера (даже если вы просто объединяете его с существующим HTML), содержимое контейнера будет удаленный, а новый innerHTMLнить будет проанализирован и затем отображен браузером. Таким образом, слушатели, которые раньше были прикреплены к чему-либо внутри контейнера, больше не будут работать.
const container = document.querySelector('#container');
const child = container.children[0];
// Before: the child's parent is the `container`, as expected:
console.info(child.parentElement);
container.innerHTML += '';
// After: the child has no parent element!
// If a listener was attached to the child before,
// the child will no longer even be in the document!
console.info(child.parentElement);<div id = "container">
<div>child</div>
</div>Для того, что вы делаете, либо используйте insertAdjacentHTML, который будет повреждать слушателей нет, но будет выполнять те же функции, что и innerHTML +=:
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');
}<body>
<button id = "bt1">Click me</button>
</body>Или явно создайте новый элемент для добавления и используйте appendChild:
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked() {
const div = document.createElement('div');
div.textContent = 'welcome';
document.body.appendChild(div);
}<body>
<button id = "bt1">Click me</button>
</body>Вам нужно будет явно указать интерпретатору повторно добавить слушателя, чтобы слушатель был повторно добавлен-например, снова выберите btn1 и используйте bt1.onclick = clicked;
Еще одно быстрое решение - повторно подключить слушателя к выбранному методу.
var bt1;
document.addEventListener('DOMContentLoaded', load);
function load() {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}
function clicked(a) {
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;
}<body>
<button id = "bt1">Click Me</button>
</body>
И почему, когда я снова вставляю
bt1.onclick = clicked;сразу после того, как вставляюinnerHTML +=, он не добавляет повторно слушателя? Обновлено: неважно, я снова добавилgetElementById, и он сработал.