Selecting only one element in the class onclick

In the code below, I have four elements. When a specific element is clicked, I would like for it to change color. Right now, for some reason, the entire row of elements is changing color, and not the individual element. Here is my code:

<style>
.tag14 span {
    padding: 6px 10px;
    background: brown;
    border-radius: 20px;
    color: #091747;
    font-family: Roboto;
    font-size: 14px;
    margin: 0 4px 8px 0;
    font-weight: 500;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
    cursor: pointer;
}


}

.tag14 span:focus{
   background:green;
}

</style>

<script>
function myfunction(elmt) 
{
    elmt.style.backgroundColor = "blue";
            
}
</script>


<div class="tag14" onclick="myfunction(this);">
    <span class="tag_span">
        Hello
    </span>
    
    <span class="tag_span">
        Hi
    </span>
    
    <span class="tag_span">
        Hello
    </span>
    
    <span class="tag_span">
        Hi
    </span>
    
    <span class="tag_span">
        Hello
    </span>
    
</div>

I suspect it has to do with how my class is named and the parameter of the onclick function.

7 thoughts on “Selecting only one element in the class onclick”

  1. const changeColor = (evt) => {
      evt.currentTarget.classList.add("is-active");
    };
    
    const EL_tag_children = document.querySelectorAll(".tag span");
    EL_tag_children.forEach(EL => EL.addEventListener("click", changeColor));
    .tag span {
      padding: 6px 10px;
      background: brown;
      border-radius: 20px;
      color: #091747;
      font-family: Roboto;
      font-size: 14px;
      margin: 0 4px 8px 0;
      font-weight: 500;
      display: inline-block;
      word-wrap: break-word;
      white-space: normal;
      cursor: pointer;
    }
    
    .tag span.is-active {
      background-color: blue;
    }
    <div class="tag">
      <span>Hello</span>
      <span>Hi</span>
      <span>Hello</span>
      <span>Hi</span>
      <span>Hello</span>
    </div>
    Reply
  2. Here you go:

    Array.from(document.getElementsByClassName("tag_span")).forEach(function(element) {
      element.addEventListener('click', function(e){
        e.target.style.backgroundColor = "blue"; 
      });
    });
    .tag14 span {
      padding: 6px 10px;
      background: brown;
      border-radius: 20px;
      color: #091747;
      font-family: Roboto;
      font-size: 14px;
      margin: 0 4px 8px 0;
      font-weight: 500;
      display: inline-block;
      word-wrap: break-word;
      white-space: normal;
      cursor: pointer;
    }
    <div class="tag14">
      <span class="tag_span">
        Hello
      </span>
      <span class="tag_span">
        Hi
      </span>
      <span class="tag_span">
        Hello
      </span>
      <span class="tag_span">
        Hi
      </span>
      <span class="tag_span">
        Hello
      </span>
    </div>
    Reply
  3. If you give specified class name to all four elements then you can select one element and then you can change that specific elements color

    *The one who downgraded my comment please point out the mistake
    Thank You

    Reply

Leave a Comment