.onclick() only fires on the first button

Question

When I clicked the "show comments" button, the result always only shown on the first button even though I clicked on the other button (2nd, 3rd, 4th, ... button). The content I wanted is shown correctly, but it doesn't displayed on the corresponding button.

I already tried to search the solutions over the internet, but I don't think I found the one, especially the other solutions answered with the use of jQuery. (No jQuery solutions, please)

HTML:

        <div id="card-container" class="posts-card-container">
            <p><strong><em>Press button "Show Posts" above (any user)</em></strong></p>
        </div>

some of the script.js:

function showPosts(data) {
    let cardContainer = document.getElementById('card-container').querySelector('p');
    cardContainer.innerHTML = '';
    for (let i = 0; i < data.length; i++) {
        let cardTitle = '<h3>TITLE: '+data[i].title+'</h3>';
        let cardBody = '<p><em>'+data[i].body+'</em><p>'
        let btnShowComments = '<td><button id="button-show-comment" class="button-comments" postId='+data[i].id
        +' onclick="loadComments('+data[i].id+')">Show Comments</button></td>';
        let cardShowComments = '<div id="show-comments"><p></p></div>';
        let newCard = '<div id="card-container" class="child-card-container">'+cardTitle
                    +cardBody+btnShowComments+cardShowComments+'</div>';
        cardContainer.innerHTML += newCard;
    }
}

function showComments(data) {
    let commentContainer = document.getElementById("show-comments");
    commentContainer.innerHTML = '<h2>Comments</h2>';
    for (let i = 0; i < data.length; i++) {
        let commentPoster = data[i].name+' '+'('+data[i].email+')';
        let commentBody = data[i].body;
        let newComment = '<p><strong>'+commentPoster+'</strong><em> commented: 
                        "'+commentBody+'</em></p>';
        commentContainer.innerHTML += newComment;
    }
}

I expect the newComment is displayed on the corresponding button (eg: if onclick() happened on the third button, newComment must be displayed under the third button), but in my code the newComment always displayed on the first button only.

Answer 1

The problem here is that querySelector() in showPosts() will only ever give the first element in the set of elements you are looking through that fits the selector.

Which isn't what you want, so instead, we can hook up this function to an event, where we put an onclick event surrounding the div containing all buttons, and use event.target to select the button that you are using. So, something like:

document.getElementById("card-container").onclick=function showPosts(event)
{
    let data=getData();//put in something like this

    //no needed element checking since only buttons have onclick events
    let cardContainer = event.target;
...
}

However, you will have to get data another way in order to use it in the function. Not to mention, you shouldn't be using the same ID in two differing elements. IDs are for directing the browser towards a single element.

Answer 2

By definition document.getElementById only returns one DOM element, the first one found, even if multiple with the same id are present. You should find a different way of selecting the button and you should also avoid having multiple elements with the same id as it's intended to be unique.

Edit: I realized after the fact that that's not exactly what you're asking, but you should still avoid using the same id multiple times, it causes all kinds of problems.