HTML Button does not call the onclick event

Question

When I run this webpage I cannot get the Buttons to run the click event. I am creating the contents of the page via javascript in the window.onload function but the event handlers for the buttons are not working. I can't get the buttons to write to the console.

var items = [
  "Item 1",
  "Item 2",
  "item 3",
  "item ......etc"
];

window.onload = function() {
  // Get container element to append the new element
  var container = document.getElementById("myContainer");
  // create an HTML element row for each item in the array
  for (let i = 0; i < items.length; i++) {
    console.log(items[i]);
    let strItem = items[i];
    // Create a new div element
    let newDiv = document.createElement('div');
    newDiv.innerHTML = '<div class="row mx-auto py-1"> \
                              <div class="col-12 col-sm-8 px-5"> \
                                <label>' + (i + 1) + '&nbsp;&nbsp;' + strItem + '</label> \
                              </div> \
                              <div class="col-12 col-sm-4 d-inline-block"> \
                                <button id="btn' + (i + 1) + '" class="btn btn-primary btn-block btn-sm d-sm-none">Button ' + (i + 1) + '</button> \
                                <button id="btn' + (i + 1) + '" class="btn btn-primary btn-sm d-none d-sm-inline-block">Button ' + (i + 1) + '</button> \
                              </div> \
                            </div>';

    // Append the new element
    container.appendChild(newDiv);

    // Get the button element
    let button = document.getElementById('btn' + (i + 1));

    // Add an event listener to the button
    button.addEventListener('click', function() {
      // Do something when the button is clicked
      console.log('Button ' + (i + 1) + ' was clicked');
    });
  }
};

<section id="myContainer"></section>

Answer 1

The first issue is, that your buttons don't have a unique ID. That's why only the first button work.

Then you should move the eventListener out of the for loop and use querySelectorAll to select all your buttons. Then you use the forEach iteration to add the eventListener to all those buttons.

Last but not least use an Event Delegation (parameter inside the function of the eventListener). With that you can read out the id of the clicked button with: parameter.target.id.

var items = [
  "Item 1",
  "Item 2",
  "item 3",
  "item 4"
];

window.addEventListener('DOMContentLoaded', function() {
  // Get container element to append the new element
  const CONTAINER = document.getElementById('myContainer');
  // create an HTML element row for each item in the array
  for (let i = 1; i < items.length + 1; i++) {
    let strItem = items[i-1];
    // Create a new div element
    let newDiv = document.createElement('div');
    newDiv.innerHTML = `<div class="row mx-auto py-1">
                          <div class="col-12 col-sm-8 px-5">
                            <label>${i} &nbsp; &nbsp; ${strItem}</label>
                          </div>
                          <div class="col-12 col-sm-4 d-inline-block">
                            <button id="btn${i}-1" class="btn btn-primary btn-block btn-sm d-sm-none">Button ${i}-1</button>
                            <button id="btn${i}-2" class="btn btn-primary btn-sm d-none d-sm-inline-block">Button ${i}-2</button>
                          </div>
                        </div>`;

    // Append the new element
    CONTAINER.appendChild(newDiv);
  }
  
  //gets all the buttons
  const BUTTONS = document.querySelectorAll('button');
  //adds an EventListener to all the buttons
  BUTTONS.forEach(button =>
    button.addEventListener('click', function(element) {
      let buttonID = element.target.id;
      console.log(`Button ${buttonID} was clicked`);
    })
  )
});

<section id="myContainer"></section>

I refactored your code to be cleaner and up to current standards.