Change background color not working. JQuery

Question

What I'm trying to do is crate a button that changes the background color of the div container with the color that was specified on the tags. When I run this on my console it says that my variables have not been specified.

<div class="grid1">
  <input id="bgR" type="text"></input>
  <input id="bgG" type="text"></input>
  <input id="bgB" type="text"></input>
  <input id="change_bgColor" type="button" value="Change Background Color"></input>
</div>


$('#change_bgColor').click(function(){
  var rColor = $('#bgR').val();
  var gColor = $('#bgG').val();
  var bColor = $('#bgB').val();
  var newColor = "rgb("+ rColor +","+ gColor +"," + bColor + ")";
  $('#container').css("background-color", newColor);
});

My code does contain a #container I just didnt post it here because I dont want to post all of my code.

http://jsfiddle.net/isherwood/muSgn/

Fiddle added to the question. http://jsfiddle.net/isherwood/muSgn/ — isherwood, May 06 '13 at 17:38
There is no element with `container` id in your HTML. BTW `` is wrong HTML. `input` is a self-closing tag — Ejaz, May 06 '13 at 17:39
Fiddle updated to include #container (works fine): http://jsfiddle.net/isherwood/muSgn/3 — isherwood, May 06 '13 at 17:39
Works fine if you specify an existing container http://jsfiddle.net/j08691/muSgn/2/ — j08691, May 06 '13 at 17:40

score 2 · Answer 1 · answered May 06 '13 at 17:41

Add an element with the ID 'container' and all is well.

http://jsfiddle.net/isherwood/muSgn/3

<div id="container">
    <div class="grid1">
        <input id="bgR" type="text"></input>
        <input id="bgG" type="text"></input>
        <input id="bgB" type="text"></input>
        <input id="change_bgColor" type="button" value="Change Background Color"></input>
    </div>
</div>

Newbie · Answer 2 · 2013-05-06T17:47:56.787

Looks like you are missing some basic.

Did you add jquery library, also wrap yo$(document).ready(){}

check this on jsfiddle working fine.

http://jsfiddle.net/saWbn/1/

<div class="grid1">
  <input id="bgR" type="text"></input>
  <input id="bgG" type="text"></input>
  <input id="bgB" type="text"></input>
  <input id="change_bgColor" type="button" value="Change Background Color"></input>
</div>

<div id="container">
this is a container 
    </div>    


    $(document).ready(function() {
    $('#change_bgColor').click(function(){

  var rColor = $('#bgR').val();
  var gColor = $('#bgG').val();
  var bColor = $('#bgB').val();
  var newColor = "rgb("+ rColor +","+ gColor +"," + bColor + ")";
  $('#container').css("background-color", newColor);
});

    // Handler for .ready() called.
});

My JQuery document is wrapped around .ready() just as my HTML contains a div #container I just didnt post them here. Your code runs fine on fiddle, but when I copied it and pasted it on my editor and ran it on Chrome it only updates the green color, and it doesnt even update actually its just a set color. — Manuel Medina, May 06 '13 at 18:07

Change background color not working. JQuery

2 Answers2