Creation of buttons and eventlisteners using javascript

Question

I am trying to create a function that will add buttons with their corresponding event listeners

var wordCount = 0;
function createButton(word, alert){
    document.querySelector('body').innerHTML += "<button id=\"word-" + wordCount + "\">" + word + "</button>";
    document.querySelector('#word-' + wordCount).addEventListener('click', function(){
        console.log(alert);
    })
    wordCount++;
}

createButton('a', 'A');
createButton('b', 'B');

Only the last button(b) responds. Clicking button(a) does not output anything. How would you fix this? Are there better ways that I could have implemented this?

Please check this one https://stackoverflow.com/questions/595808/is-it-possible-to-append-to-innerhtml-without-destroying-descendants-event-list — Sivakumar Tadisetti, Aug 26 '18 at 05:42

Padmanabhan · Answer 1 · 2018-08-26T07:15:53.033

0

I am frequently facing this situation and doing it in a simpler way. see this, (the beauty of the method is if you start the variable full with single quotes, you can add any usual double quoted stuff within it, with ease and without any escaping issues). No addEventListener business needed here. :-)

var full = '';
var wordCount = 0;

function createButton(word, alert) {
    alert='\''  + alert + '\'';
  full = full + '<a href="javascript:void(0)" onclick="alert(' + alert + ');">'

  full = full + '<button id="word-' + wordCount + '" >' + word + '</button>';

  full = full + '</a>';

  document.querySelector('body').innerHTML += full;
  wordCount++;
}

function anyFunction(alert) {
  console.log(alert);
}

createButton('a', 'A');
createButton('b', 'B');

edited Aug 26 '18 at 07:15

answered Aug 26 '18 at 06:19

Padmanabhan

152
2
14

If you can create the stack snippet, that will be more understandable for the OP – Sivakumar Tadisetti Aug 26 '18 at 06:42
I am also New to Stackoverflow. Don't know how to add stack snippet. I will post full working code instead. – Padmanabhan Aug 26 '18 at 06:55
I've edited and added the snippet to your question, approve it – Sivakumar Tadisetti Aug 26 '18 at 07:00
Thank you. I have further edited it. It is working now. – Padmanabhan Aug 26 '18 at 07:08

Creation of buttons and eventlisteners using javascript

1 Answers1