trying to change background color of html using Jquery on click

Question

So I am trying to make a simple little Jquery function that changes the background color of the body when you click it. When the body is clicked on, if it is red, change it to orange, else, change it to red.

My code (Yes, I am aware of the issue of having my script, css and html on one page, but this is just a testing ground for this one aspect of my code.)

<!DOCTYPE html>
<html>
<head>
    <style>
        body {background-color: red}
    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("body").on("click",(function(){
    var color = $("body").css("background-color")

        if (color == rgb(255,0,0)){
          $("body").css("background-color",    rgb(255,165,0) );
      }
      else{
        $("body").css("background-color",   rgb(255,0,0) );
      }


  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>Some Text</p>
<p>Around</p>
<p>Here<p>
<p>Yep.</p>
</body>
</html>

The `body` tag doesn't have a `.val()` method to be called through its jQuery selector, because it doesn't have a `value`. It's not an `input`, `select`, etc. — emerson.marini, Dec 12 '13 at 16:12
Updated with some of the answers given. Why doesn't this work now? The tertiary version that some suggested works just fine, but I was curious as to why this was not working. — user1768884, Dec 12 '13 at 16:39
@user1768884 I explained it in my answer: .val is not valid for a body element! "rgb(255,0,0)" NOT rgb(255,0,0) it is a string not an object — giammin, Dec 12 '13 at 16:41
@giammin. I got rid of the val statement. Check it out. Anyways, I figured it out. You have to put the rgb(x,x,x) in quotes. — user1768884, Dec 12 '13 at 16:42
@user1768884 becouse it is a string that rapresent a color not an object. I misunderstood your comment question..:D — giammin, Dec 12 '13 at 16:42
Ahh. I'm so used to Python, Java, C, etc so I thought rgb would be like a function call, rather than a string. This is all new territory to me. Thanks for the help. — user1768884, Dec 12 '13 at 16:44

score 2 · Answer 1 · answered Dec 12 '13 at 16:10

2

Try changing:

var color = $("body").val("background-color")

To:

var color = $("body").css("background-color");

answered Dec 12 '13 at 16:10

Hayzeus

63
7

score 2 · Answer 2 · answered Dec 12 '13 at 16:11

.val() wont return the css property of an element. .css('style-name') will get the value of that passed style. Please read here to know more about .css().

Try,

$(document).ready(function(){
  $("body").click(function(){
    var color = $("body").css("background-color")   
        if (color == "red"){
            $("body").css("background-color", "orange" );
      }
      else{
        $("body").css("background-color", "red" );
      }
  });
});

giammin · Accepted Answer · 2013-12-12T16:34:00.607

the error is in this line:

var color = $("body").val("background-color")

The .val() method is primarily used to get the values of form elements such as input, select and textarea.

To get the value of a style property use the .css() method:

var color = $("body").css("background-color")

Another error is that .css() method accepts string color as "red" and "orange" but it returns the rgb color code "rgb(255, 255, 255)" so you should use the rgb representation of the colors to test the body background color.

$(document).ready(function(){
  $("body").click(function(){
    var orange="rgb(255, 165, 0)";
    var red="rgb(255, 0, 0)";
    var color = $("body").css("background-color")   
    if (color == red){
       $("body").css("background-color", orange );
    }
    else{
       $("body").css("background-color", red );
    }
  });
});

score 2 · Answer 4 · edited May 23 '17 at 12:03

Try:

  $(function(){
    $("body").click(function(){
        $(this).css("background-color", function(_, val){
            return val === "rgb(255, 0, 0)" ? "rgb(255,165,0)" : "rgb(255, 0, 0)";
        });
    });
  });

Demo

Color will be interpreted in RGB format so you actually would need to test on that instead of the text representation of color (like red, blue etc).

According to Docs

If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgb(0,0,0).

Remember that when you use .css it will add inline style to the element you can switch classes to workaround the issue of dealing with RGB format.

CSS:

body{background-color:red;}
body.orange {background-color:orange;}

JS:

 $(function(){
  $("body").click(function(){
    $(this).toggleClass('orange');
  });
 });

Demo

Here is an SO answer which will give you all the color conversions

Just added my answer since at the time of posting mine, all other answers did not point out the RGB thing with color... None of them would have worked. — PSL, Dec 12 '13 at 16:31

trying to change background color of html using Jquery on click

4 Answers4