0

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/

4

2 回答 2

2

添加一个 ID 为“容器”的元素，一切正常。

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>
于 2013-05-06T17:41:07.927 回答
0

看起来你缺少一些基本的东西。

有没有加 jquery 库，还包 yo$(document).ready(){}

在jsfiddle上检查这个工作正常。

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.
});
于 2013-05-06T17:42:48.297 回答