.onclick（）僅在第一個按鈕上觸發

Question

當我單擊“顯示評論”按鈕時，即使我單擊了另一個按鈕（第二，第三，第四，...按鈕），結果也始終僅顯示在第一個按鈕上。 我想要的內容已正確顯示，但未顯示在相應的按鈕上。

我已經嘗試過在Internet上搜索解決方案，但是我認為我找不到一個解決方案，尤其是其他使用jQuery解決的解決方案。 （請沒有jQuery解決方案）

HTML：

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

一些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;
    }
}

我希望newComment顯示在相應的按鈕上（例如：如果onclick（）發生在第三個按鈕上，則newComment必須顯示在第三個按鈕下），但是在我的代碼中，newComment始終僅顯示在第一個按鈕上。

Answer 1

這里的問題是showPosts（）中的querySelector（）只會提供要查找的適合選擇器的元素集中的第一個元素。

這不是您想要的，因此，我們可以將此函數連接到一個事件，在該事件中，我們在包含所有按鈕的div周圍放置一個onclick事件，並使用event.target選擇要使用的按鈕。 因此，類似：

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;
...
}

但是，您將不得不以其他方式獲取數據才能在函數中使用它。 更不用說，您不應在兩個不同的元素中使用相同的ID。 ID用於將瀏覽器定向到單個元素。

Answer 2

根據定義， document.getElementById僅返回一個DOM元素，即找到的第一個DOM元素，即使存在多個具有相同ID的元素也是如此。 您應該找到一種不同的選擇按鈕的方式，並且還應該避免讓多個具有相同ID的元素與唯一的元素相同。

編輯：我意識到這並不是您真正要問的事實，但是您仍然應該避免多次使用相同的ID，否則會引起各種問題。