I'm making a Color Change function for my project. This is my html: click to see it
As title, I want to create some tags which have the same class like this: <a class="dropdown-item" onclick...></a>
And whenever a user click on 1 of those tags, that tag the user clicked will have an extra text [current] like this: Sky [current]. But when another tag is clicked, the text [current] will move to the new tag (with the same class) which the user just clicked.
One simple approach is to just remove the extra text from every clickable element, then add it to the one that was clicked.
Here's an example.
function addText(event)
{
for (anchorTag of document.getElementsByClassName("myButton")){
anchorTag.innerHTML = anchorTag.innerHTML.replace(" Grape", "");
}
event.target.innerHTML = event.target.innerHTML + " Grape";
}<a href="#" class="myButton" onclick="addText(event)">Apple</a>
<br/>
<a href="#" class="myButton" onclick="addText(event)">Orange</a>