CODEWITHSUNDEEP
javascripthtmlcss
youewew
youewew

Reputation: 41

Changing the element background color on click

I have attached my HTML code below. I am trying to change the color of this element on click. I have a script that works on click, but the color is not changing for some reason.

function myfunction() {
    var elements = document.getElementsByClassName("tag14"); // get all elements
    for(var i = 0; i < elements.length; i++){
        elements[i].style.backgroundColor = "blue";
    }
}
.tag14 span {
    padding: 6px 10px;
    background: #D0E8E4;
    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;
}

.tag14 span:hover{
background:red;
}

.tag14 span:focus{
background:green;
}
<div class="tag14" onclick="myfunction();"><span>Hello</span></div>

I think it's something in the function that is not operating correctly.

Update 2 With help, I figured out how to toggle click on and off:

<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;
}


.tag14 span:focus{
   background:green;
}

</style>

<script>
function myfunction() {
    
    var elements = document.getElementsByClassName("tag_span"); // get all elements
    
      for(var i = 0; i < elements.length; i++){
            if (elements[i].style.backgroundColor === ""){
                elements[i].style.backgroundColor = "blue";
                elements[i].style.color = "white"; 
            } else {
                elements[i].style.backgroundColor = "";
                elements[i].style.color = "black";
            }
      }
}
</script>


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

Upvotes: 1

Views: 205

Answers (1)

MarLMazo
MarLMazo

Reputation: 424

So, you only need to select the Span-element instead of the DIV-element.

So here I added an extra class for the span and you can select the span itself.

function myfunction() {
    var elements = document.getElementsByClassName("tag_span"); // get all elements
    for(var i = 0; i < elements.length; i++){
        elements[i].style.backgroundColor = "blue";
        elements[i].style.color = "white"; //added this extra element so that you can see the Hello 
    }
}
.tag14 span {
    padding: 6px 10px;
    background: #D0E8E4;
    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;
}

.tag14 span:hover{
    background:red; /* you can add red !important so it will still work after the click event. So when you change the Span background color in JS, it will be an inline css styling that has higher priority than this one*/
}

.tag14 span:focus{
   background:green;
}
<div class="tag14" onclick="myfunction();"><span class="tag_span">Hello</span></div>

But I don't recommend you putting an onclick function on a Div-element. So better put it on the Script by adding an event listener to it. You can learn more about event-listener here w3schools

Upvotes: 1

Related Questions