Функция JavaScript onclick работает только один раз (очень простой код) - PullRequest
Новая
       69

Функция JavaScript onclick работает только один раз (очень простой код)

0 голосов
/ 13 ноября 2018

Я знаю, что есть много тем об этом, но они затрагивают некоторые переменные проблемыМой намного проще, но он не работает.Работает только один раз.

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 (как и предлагалось в некоторых других темах).

Iтакже попытался переместить объявление переменной bt1 (и вообще не использовать переменную).

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Еще одним быстрым решением было бы присоединить слушателя к нажатому методу. 

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>
0 голосов
/ 13 ноября 2018

Всякий раз, когда вы назначаете innerHTML контейнера (даже если вы просто объединяете с существующим HTML), содержимое контейнера будет удалено , а новая строка innerHTML будет проанализировано и затем обработано браузером. Таким образом, слушатели, которые раньше были подключены к чему-либо внутри контейнера, больше не будут работать. 

const container = document.querySelector('#container');
const child = container.children[0];

// Before: the child's parent is the `container`, as expected:
console.log(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.log(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>
...