Writing multiple event listeners for different buttons in Javascript

Question

I'm trying to run two buttons to show two pop-ups. I don't understand why CODE A below doesn't work but CODE B works. When I press the "press1" button on CODE A, nothing happens. Must I output all my HTML together at once? I'm trying to run a for-loop so how could I output both working buttons?

CODE A

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press1">Press Me</button></td></tr>';

//Find all buttons on the page with the name transferToken
var button1 = document.querySelector('button.press1');

button1.addEventListener('click', function () {
  alert("Hello John");
});

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press2">Press Me</button></td></tr>';

var button2 = document.querySelector('button.press2');

button2.addEventListener('click', function () {        
  alert("Hello Jane");
});

CODE B

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press1">Press Me</button></td></tr>';

document.getElementById("buttondiv").innerHTML += '<tr><td><button class="press2">Press Me</button></td></tr>';

var button1 = document.querySelector('button.press1');

button1.addEventListener('click', function () {
  alert("Hello John");              
});

var button2 = document.querySelector('button.press2');

button2.addEventListener('click', function () {
  alert("Hello Jane");
});

SparK · Accepted Answer · 2019-06-30 04:50:57Z

2

When you add an element via innerHTML you are making the browser redraw all the content, read the code again and parse it to rebuild the DOM, which creates a new button1 without any listener attached (the old one got destroyed).

You should first createElement to make your new button and then appendChild to your buttondiv.

So you preserve old objects inside your buttondiv and their events. The advantage is that you don't force the browser to parse HTML and only deal with objects in memory instead, which is way faster.

edited Jun 30, 2019 at 4:50

answered Jun 30, 2019 at 4:38

SparK

5,2212 gold badges26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mamun · Accepted Answer · 2019-06-30 04:47:18Z

Setting the value of innerHTML removes all of the element's descendants and replaces them with nodes constructed by parsing the HTML given in the string htmlString.

innerHTML completely destroy and recreate element, thus forget all the prevously attached event.

To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML().

Demo:

document.getElementById("buttondiv").insertAdjacentHTML('beforeend', '<tr><td><button class="press1">Press Me</button></td></tr>');
//Find all buttons on the page with the name transferToken
var button1 = document.querySelector('button.press1');
button1.addEventListener('click', function () {
  alert("Hello John");
});
document.getElementById("buttondiv").insertAdjacentHTML('beforeend','<tr><td><button class="press2">Press Me</button></td></tr>');
var button2 = document.querySelector('button.press2');
button2.addEventListener('click', function () {
  alert("Hello Jane");
});

<div id="buttondiv"></div>

Ashish Kumar · Accepted Answer · 2019-06-30 05:03:58Z

0

The problem with CODE A is, you have button "press1" and an event listener on it but once you take that element away and re-append it, you essentially delete the bound OnClick Event because the dom is re-constructed and it won’t re-bind.

answered Jun 30, 2019 at 5:03

Ashish Kumar

4275 silver badges12 bronze badges

Collectives™ on Stack Overflow

Writing multiple event listeners for different buttons in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related