Selecting only one element in the class onclick

by

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