简体   繁体   中英

Why isn't my jQuery function passing the parameter and changing it?

I am trying to set a function with parameter color. I am then trying to get the input text thats typed in and to change colour of the div according to the text input by passing through the parameter.

My current attempts are not working, any help or ideas please?

html snippet

    <div class="bulb" id="bulb1"></div>
    <button id="setColor">Color set</button>
    <input type="text" id="colorText"></input>

jquery

$( document ).ready(function() {


    $('#setColor').click(function()
    {
        $( "#colorText" ).is( color );

        setColor(color);

        $('#colorText').val('');

    });


});

function setColor(color){

    $('#bulb1').css({'background-color': color});   

}

Do it like this:

$( document ).ready(function() {


  $('#setColor').click(function()
  {
    var color = $( "#colorText" ).val();  // Get the color in the input box.

    setColor(color);

    $('#colorText').val('');

  });


});

function setColor(color){

   $('#bulb1').css({'background-color': color});   

}

Here you go : http://jsfiddle.net/mwjfz7tq/

Try this (I've added some height and width to your div so it is visible):

<div class="bulb" style="height:50px; width:50px" id="bulb1"></div>
<button id="setColor">Color set</button>
<input type="text" id="colorText"></input>

And here is the JS(I have changed it to capture the text and pass it to the setColor function.):

$( document ).ready(function() {

    $('#setColor').click(function()
    {
        var c = $( '#colorText' ).val();
        setColor(c);

        $('#colorText').val('');
    });
});

function setColor(color){
    $('#bulb1').css({'background-color': color});
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM