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.

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

  24. 641143 863811Awesome material you fellas got these. I really like the theme for the site along with how you organized a person who. It is a marvelous job For certain i will come back and take a look at you out sometime. 516875

    Reply