1

I'm trying to use jQuery to change the background color of a <div> section when pressing on a button, and below is the code to do that. Why isn't it working?

HTML file

<html>
<head>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css"> 
#name{
background-color: #FFFFF2;
width: 100px;
}
</style>
</head>
<body>
<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</body>

</html>

script.js

$("bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

Thanks.

genesis
  • 50,477
  • 20
  • 96
  • 125
Simplicity
  • 47,404
  • 98
  • 256
  • 385

3 Answers3

5

You have several problems:

  1. Your selector is wrong: $("#bgcolor")
  2. You're missing a closing </div> tag.
  3. You need jQueryUI to animate background-color.

HTML:

<input type="button" id="bgcolor" value="Change color"/>
<div id="name">
Abder-Rahman
</div>

JS:

$("#bgcolor").click(function(){
    $("#name").animate(
        {backgroundColor: '#8B008B'},
        "fast");}
);

Your code, fixed (and working with jQueryUI included): http://jsfiddle.net/andrewwhitaker/rAVj9/

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
  • By asking Marcos from `http://marcofolio.net/`, I had to add this around my jQuery: `$(function() {....});`. For the reason to do that, he said: `To execute jQuery code, the document has to be fully ready to attach the desired handlers.` – Simplicity Oct 03 '11 at 09:38
  • @Med-SWEng: That's correct--I couldn't tell if you were sharing your script from *inside* your `$(document).ready(...)` handler or not. Glad you figured it out. – Andrew Whitaker Oct 03 '11 at 12:37
1

From the jQuery website:

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality. (For example, width, height, or left can be animated but background-color cannot be.)

Use jquery UI package to animate colors.

cschleiden
  • 171
  • 1
  • 5
1

Ensure you include the CSS selector inside the jQuery that you wish to target.

$("bgcolor").click(function(){

Should be:

$("#bgcolor").click(function(){

Because you are targeting an ID.

davo0105
  • 117
  • 8
  • How can I do what you mention by: `Ensure you include the CSS selector inside the jQuery that you wish to target.`? Thanks – Simplicity Oct 01 '11 at 18:44
  • You have given the input an ID of **bgcolor** which in CSS terms, is identified by a hash symbol e.g. `#bgcolor`. Similarly with classes, they are identified by a period/full stop e.g. `.bgcolor`. You need to make sure that when you are targeting these in jQuery you are including the CSS selector character (the hash or the period). – davo0105 Oct 03 '11 at 22:31
  • You may already understand, but if not, see http://bit.ly/2QVpu8 which is another Stack question on CSS selectors. – davo0105 Oct 03 '11 at 22:35