How to make newly cloned buttons work with an existing eventlistener?

February 18, 2023

On the press of the button ‘leave’ I want 10 new ‘leave’ buttons to be displayed on the screen. Each one of these buttons needs to display 10 new buttons on the screen when clicked.

But only the original ‘leave’ button displays 10 new buttons, the newly cloned ones don’t.

Javascript code:

const container = document.querySelector('.container');
const leaveButton = document.querySelector('#leave');

leaveButton.addEventListener('click', () => {
    for (let i = 0; i < 10; i++) {
        const newButton = document.createElement('button');
        newButton.innerHTML = leaveButton.innerHTML;
        newButton.style.top = Math.random() * window.innerHeight + 'px';
        newButton.style.left = Math.random() * window.innerWidth + 'px';
        newButton.setAttribute("id", "leave");
        container.appendChild(newButton);
    }
});

HTML code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>PressTheButton</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <button id="leave">Leave</button>
        <h1>It's simple</h1>
        <p>Just click the buttons</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

>Solution :

Instead of adding the event listener to a fixed button you should work with delegated event listening. In the snippet below I added the click event to the parent container. Inside the event listener callback function I briefly check, wether the .textContent of the clicked element is equal to "Leave" and, if not, I return immediately without carrying out any action.

const container = document.querySelector('.container');
const leaveButton = document.querySelector('#leave');

container.addEventListener('click', ev => {
if (ev.target.textContent!=="Leave") return;
for (let i = 0; i < 10; i++) {
    const newButton = document.createElement('button');
    newButton.innerHTML = leaveButton.innerHTML;
    newButton.style.top = Math.random() * window.innerHeight + 'px';
    newButton.style.left = Math.random() * window.innerWidth + 'px';
    newButton.setAttribute("id", "leave");
    container.appendChild(newButton);
}
});

button {position:absolute}

<head>
<meta charset="UTF-8">
<title>PressTheButton</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <button id="leave">Leave</button>
    <h1>It's simple</h1>
    <p>Just click the buttons</p>
</div>