Click event doesn't work with multiple similar buttons

So I am making a ‘discussion forum’ for some practice. I created comments and added a ‘view replies’ button (An anchor tag). Consider there are 32 separate posts on the forum, there is a distinct ‘view replies’ button for each post and when clicked, the display: none property should be changed to display: block.

It seemed simple at first but when I completed the task, the thing is that for the top post (which is the latest one) the ‘view replies’ button works perfectly, but for the second post onwards…it simply doesn’t work. I’m not sure if javascript can only handle one event or something? I can’t say, I’d be speculating.

This is how it works:

The button:
<a id = 'toggleReplies'>View Replies</a>

The replies container:

<div class = 'r_container'>
<p> The text of the first reply </p>
<p> The text of the second reply </p>
<p> The text of the third reply </p>
</div>

In css:

.r_container {
    display: none;
}

In javascript (jQuery attached):

$(document).ready(function() {
    let clicked = false;
    $('#toggleReplies').on('click', function() {
        $('.r-container').toggle();
        if (!clicked) {'
            document.getElementById('toggleReplies').innerHTML = 'Hide';
        }
        if (clicked) {
            document.getElementById('toggleReplies').innerHTML = 'View Replies';
        }
        clicked = !clicked;
    });
});

The thing is, this works perfectly to show/hide the replies of the first post but does absolutely nothing for the rest of them. Also, even if it were to work for them, I feel like it would toggle all of the replies for every single post but I don’t wanna bore you with my amateurish speculation, any help would be appreciated. There are a lot more things in my code like simply ajax to load more posts/replies, php to store posts in mysql and to display them from it etc but I didn’t think they’d be relevant to my query. Still, let me know if you need more info. Sorry for the really long post.

New Info:

I tried something else, I changed the javascript code. The revised code, I’ve only included the changes:

<a id = 'toggleReplies' onclick = 'repliesReveal()'>View Replies</a>
function revealReplies() {
    $('.r_container').toggle();
}

This causes a different problem. It basically toggles all r_container elements but what I want to do is to only toggle the r_container directly below the anchor tag that was clicked. I’m so stuck! I’d really appreciate some help. Keep in mind that they MUST have the same class (r_container) as there are variable number of posts at any point in time. Thanks in advance :slight_smile:

Recall that only one element may have a particular id. All others will/may be ignored by the browser.

Consider event propagation and bubbling. This allows us to add a listener to the parent element (the one with id and have it listen for click events anywhere among its child elements, then delegate that event target to the handler.

The event target will have scope only on the contained element of class ‘r_container’ so that will be the affected element.

1 Like

Thanks but by the time you replied I added a counter using php and changed every relevant element’s id name according to the integer the counter was on and also added the counter’s integer to the function name, essentially making a looong list of function, each one separately toggling each reply button…

Although I have a feeling this will make the program slow in the long run, do you think it will? Should I switch to the method you referred to?

1 Like

Event delegation is the simplest once implemented. There is only one listener so a very small memory footprint.

I’ve posted a few examples over the years. Now we have just to find them. Search the forum for delegation and they should come up.

1 Like