Problem with HTML content loading using addEventListener

Question

In the following code I want every button to alert its own id. the problem is that only the id of first button is alerted in all other buttons.

document.getElementById('button').addEventListener('click', function() {
  addElement();
}, false);


function addElement() {

  di3 = rngc(10, 100001);

  document.getElementById('demo').insertAdjacentHTML('afterbegin', '<button id="' + di3 + '" type="button" >newb</button>');

  document.getElementById(di3).addEventListener('click', function() {
    al(di3);
  }, false);
}

function al(x) {
  console.log(x);
}




function rngc(A, B) {
  var d = new Date(),
    n = d.getMilliseconds();
  return 'ig' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, A) + Math.floor(Math.random() * (B)) + n;
}

<button id="button" type="button">add</button>
<div id="demo"></div>

Note 1 : my actual code loads many html elements as one string. Update: I don't want to use onclick attribute; addEventListener is my target.

Please update your question with a runnable [mcve] demonstrating the problem using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/)). — T.J. Crowder, Aug 31 '19 at 10:36

score -1 · Accepted Answer · edited Apr 21 '20 at 12:47

-1

You can use this answer, it will solve you problem

<script type="text/javascript">

document.getElementById('button').addEventListener('click', function() {
  addElement();
}, false);


function addElement() {

  di3 = rngc(10, 100001);

  document.getElementById('demo').insertAdjacentHTML('afterbegin', '<button id="' + di3 + '" type="button" >newb</button>');
// console.log(document.getElementById(di3).getAttribute("id"));

  document.getElementById(di3).addEventListener("click", function() { al(this.id) } , false);       
}

function al(x) {

    alert(x);
}




function rngc(A, B) {
  var d = new Date(),
    n = d.getMilliseconds();
  return 'ig' + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, A) + Math.floor(Math.random() * (B)) + n;
}
</script>

edited Apr 21 '20 at 12:47

halfer

19,824
17
99
186

answered Aug 31 '19 at 10:44

Pushprajsinh Chudasama

7,772
4
20
43

Sorry, your answer solves the problem, however I don't want to use onclick attribute; addEventListener is my target. thanks – abdelaziz botalb Aug 31 '19 at 10:53
I have updated my answer , Hope this is what you are looking for . @abdelazizbotalb – Pushprajsinh Chudasama Aug 31 '19 at 11:00
I want the created newb buttons to give the alerts not the add button, as my code indicates. so an event handler is attached to newb buttons through addEventListener (NOT onclick attribute) – abdelaziz botalb Aug 31 '19 at 11:06
So what should exactly happen when we click on add button ? Will you please explain me in little bit more detail ? @abdelazizbotalb – Pushprajsinh Chudasama Aug 31 '19 at 11:08
see my update I have added a Snippet. create number of newb buttons by pressing on add button then click on those newb buttons you will see that they dont have unique IDs, and this is the problem – abdelaziz botalb Aug 31 '19 at 11:16
So your solution is when you click on new button , you want an alert of that clicked-button ID , is it ? Because in your snippet all the new buttons have unique ID . @abdelazizbotalb – Pushprajsinh Chudasama Aug 31 '19 at 11:21
yes that is right – abdelaziz botalb Aug 31 '19 at 11:28
Here , this what my updated code will do . When you click on add button , it will create a new button . Now when you click on new button , it will give an alert displaying `ID` of that button . @abdelazizbotalb – Pushprajsinh Chudasama Aug 31 '19 at 11:31
Yes your updated code is correct and does what i want, but I don't want to use the onclick attribute inside the new buttons; I want addEventListener – abdelaziz botalb Aug 31 '19 at 11:48
okkkk ot your point . @abdelazizbotalb – Pushprajsinh Chudasama Aug 31 '19 at 11:49
My lastest code runs perfectly as per your need . @abdelazizbotalb – Pushprajsinh Chudasama Aug 31 '19 at 12:03

Problem with HTML content loading using addEventListener

1 Answers1