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=".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>
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./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
bodytag doesn't have a.val()method to be called through its jQuery selector, because it doesn't have avalue. It's not aninput,select, etc. – emerson.marini Commented Dec 12, 2013 at 16:12 - Like this ? jsfiddle/9cHYa – PSL Commented Dec 12, 2013 at 16:18
- 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 Commented Dec 12, 2013 at 16:39
- 1 @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 Commented Dec 12, 2013 at 16:41
- 1 @user1768884 becouse it is a string that rapresent a color not an object. I misunderstood your ment question..:D – giammin Commented Dec 12, 2013 at 16:42
4 Answers
Reset to default 2the 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 );
}
});
});
Try changing:
var color = $("body").val("background-color")
To:
var color = $("body").css("background-color");
.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" );
}
});
});
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 puted 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