.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，否则会引起各种问题。