Change background color from js

Question

I would set the background color of an element by onclick javascript function. My code is:

function changeBg( el ) {
    if( $( el ).css( "background-color" ) === "rgb(255,255,0)" ) {
        $( el ).css( "background-color", "red" );
    }
    else {
        $( el ).css( "background-color", "rgb(255,255,0)" );
    }
}

This code works for change the default background color to yellow (rgb(255, 255,0)) but it doesn't work from yellow to red. The first condition is always skipped

I would recommend putting the jQuery object in a variable. Rather than creating a new jQuery object on each line. — evolutionxbox
– evolutionxbox, Commented Jul 12, 2017 at 10:27
try to capture value, before compare, will be different. Because is parsing to hexadecimal, and your comparation is RGBA — Álvaro Touzón
– Álvaro Touzón, Commented Jul 12, 2017 at 10:29
I tried to print the typeof and the value of the element background color and return String rgb(255,255,0) — Federico Rampazzo
– Federico Rampazzo, Commented Jul 12, 2017 at 10:31
As you're comparing strings, try putting spaces in between the RGB values as that's likely to be the issue $( el ).css( "background-color" ) === "rgb(255, 255, 0)" — evolutionxbox
– evolutionxbox, Commented Jul 12, 2017 at 10:32
Are you sure its not returning "rgb(255, 255, 0)" with the spaces — znap026
– znap026, Commented Jul 12, 2017 at 10:32

prasanth · Accepted Answer · 2017-07-12 10:36:56Z

7

For more better way use with toggleClass() instead of color value matching with in dom

function changeBg(el) {
  $(el).toggleClass('red')
}

.red {
  background-color: red;
}
button{
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeBg(this)">change</button>

answered Jul 12, 2017 at 10:36

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

treyBake Over a year ago

inline js / css caused by js needs to stop :D this should be used^^ :)

Ehsan · Accepted Answer · 2017-07-12 11:04:21Z

1

Try This:

$(document).ready(function(){
    $('button').click(function(){
        $(this).toggleClass('redColor');
    })
})

button {
    background-color: yellow;
}

.redColor {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Click Me!</button>

edited Jul 12, 2017 at 11:04

answered Jul 12, 2017 at 10:58

Ehsan

13k3 gold badges27 silver badges46 bronze badges

Comments

Bibhudatta Sahoo · Accepted Answer · 2017-07-12 10:41:18Z

0

Try this

$(document).ready(function() {
$('.container').on('click',function(){
  var el = ".container";
  if ($(el).css("background-color") === "rgb(255, 255, 0)") {
    $(el).css("background-color", "red");
  } else {
    $(el).css("background-color", "rgb(255, 255, 0)");
  }
  });
});

.container {
  background-color: rgb(255, 255, 0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  Test
</div>

answered Jul 12, 2017 at 10:41

Bibhudatta Sahoo

4,9142 gold badges31 silver badges53 bronze badges

Collectives™ on Stack Overflow

Change background color from js

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related