how to change the css of a div with javascript

Question

I made a div with jquery, and after that div is made i want to change the css of it. However, the change doesn't work.

This is my HTML:

<form>
        <input type="text" id="color" placeholder="color"><br>
        <input type="text" id="height" placeholder="height"><br>
        <input type="text" id="width" placeholder="width"><br>
        <input type="button" id="make" value="Make">
    </form>

and this is the jquery:

$(document).ready(function() {
            $('#make').click(function() {
                if (($('#color').val().length) == 0 || ($('#height').val().length) == 0 || ($('#width').val().length) == 0 ) {
                    alert('lol')
                } else {
                    var color = $('#color').val();
                    var height = $('#width').val();
                    var width = $('#height').val();
                    $('body').append('<div id="kast" style="background:'+color+'; width:'+width+'px; height:'+height+'px;"></div>')
                    $('#make').remove();
                    $('form').append('<input type="button" id="change" value="Change">');

                }
            })
            $('#change').click(function() {

                var color = $('#color').val();
                var height = $('#width').val();
                var width = $('#height').val();
                $('#kast').css('background-color', color);
            })
        })

I hope someone can help me :)

The element is not in the code when the page loads. you first have to enter the color and the dimensions. then you can click on make. After you've made the div #kast then the button change appears — MrSkippy
– MrSkippy, Commented Nov 21, 2013 at 12:19

Ankit Tyagi · Accepted Answer · 2013-11-21 12:18:43Z

1

Try 'on' as you are creating it dynamically : on

 $('body').on('click','#change',function() {
       var color = $('#color').val();
       var height = $('#width').val();
       var width = $('#height').val();
       $('#kast').css('background-color', color);
    })

answered Nov 21, 2013 at 12:18

Ankit Tyagi

2,37511 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Satpal · Accepted Answer · 2013-11-21 12:19:09Z

1

As you need to use .on() for dynamic elements

$('form').on('click', '#change', function() {
    var color = $('#color').val();
    var height = $('#width').val();
    var width = $('#height').val();
    $('#kast').css('background-color', color);
})

DEMO

answered Nov 21, 2013 at 12:19

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Jovan Perovic · Accepted Answer · 2013-11-21 12:19:29Z

1

Replace click() with event delegate:

$(document).on('click, '#change', function() {
    ...
});

answered Nov 21, 2013 at 12:19

Jovan Perovic

20.2k5 gold badges47 silver badges92 bronze badges

Comments

Louis · Accepted Answer · 2013-11-21 13:23:19Z

1

in this situation that you can't just use as $('#change').click to bind a event on a DOM object which you created after the page was already loaded. You should use these below:

$(document).on('click', '#change', function() {

          var color = $('#color').val();
          var height = $('#width').val();
          var width = $('#height').val();
          $('#kast').css('background-color', color);

      });

edited Nov 21, 2013 at 13:23

Louis

152k28 gold badges288 silver badges332 bronze badges

answered Nov 21, 2013 at 12:43

user3017449

113 bronze badges

Collectives™ on Stack Overflow

how to change the css of a div with javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related