Question

0

70

Views

Make "a" tags, whenever it is clicked, add inner text inside it, but remove when another "a" tag (same class) is clicked

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.

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Accepted Answer · 2022-06-29T02:22:17.258Z

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>