I have a list of chats on html.
Is there a way for me to add a classname to only the item that I clicked along with the items on the list with similar usernames?
<div id="chats">
<div class="chat">
<div class="username">Sam</div>
</div>
<div class="chat">
<div class="username">Sam</div>
</div>
<div class="chat">
<div class="username">Sam</div>
</div>
<div class="chat">
<div class="username">Frank</div>
</div>
<div>
For example, if I clicked the first “Sam” is there a way for me to have all the “Sams” classnames change to “username highlight.” So all the Sam’s would have their class name changed (classname = username sam) except the last one Frank (classname = username).
1 Like
Hi @camperextraordinaire, my apologies, I meant to say when I click on sam, all the one’s that state “Sam” should have a classname of “username highlight.”
Why do I care if the user clicks on the name and What is the ultimate purpose in doing any of this??
I wanted to make all the ones with a text “Sam” get highlighted.
I have a css file that basically adds css to any class with the class name “highlight” in it. I just wanted to see if I click on “Sam” can I make all the other Sam’s classname’s include “highlight” so that all the “Sam’s” have css added to it?
Is the username unique? If so then probably add a class based on the username:
<div class="username user_sam">Sam</div>
And then you can easily target all elements with class user_sam
.
Update: Ahh, I see @camperextraordinaire already suggested this, I didn’t read his reply carefully enough. Sorry about that.
Thank you for taking the time to message me! I was able to figure it out, I appreciate your time!
Thank you, this answered my question and it worked!