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.

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

Leave a Comment