How do you modify the CSS using an input box in JQuery

Question

This is the code i am trying to get to work, i could not work out why JQ will not pick up the #cols1 var from the inputbox.

This is a basic example of the code i am using.

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.min.js'>
</script>
<script type='text/javascript'>

function changeCon()
{
var cols1 = $('#col1').value;
$('#div1').html('Random text');
$('#div1').css({ backgroundColor: "#cols1" });
}

function startup()
{
$('#bt1').click(changeCon);
}
$(startup);

</script>
</head>
<body>
<input id='col1' type='text' /> <br />
<div id="div1">text div.</div>
<input type="button" id="bt1" value="Submit" />
</body>
</html>

If anyone know's why, it would be great cheers.

mildog8 · Accepted Answer · 2014-10-26 22:46:19Z

4

Do it like this

var cols1 = $('#col1').val();
$('#div1').html('Random text');
$('#div1').css({ backgroundColor: "#" + cols1 });

or

var cols1 = $('#col1')[0].value;
$('#div1').html('Random text');
$('#div1').css({ backgroundColor: "#" + cols1 });

answered Oct 26, 2014 at 22:46

mildog8

2,1742 gold badges23 silver badges39 bronze badges

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

1 Comment

Mattlinux1 Over a year ago

Thanks this has worked. it is a big difference between using: var bcol = document.getElementById("bcols").value; and document.getElementById('div1').style.backgroundColor=bcol; but still learning JQ.

Quentin · Accepted Answer · 2014-10-26 22:44:40Z

2

jQuery objects do not have a value property (DOM elements representing HTML form controls do). jQuery objects have a val() method.

answered Oct 26, 2014 at 22:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

ddlab · Accepted Answer · 2014-10-26 22:50:12Z

1

Quentin is right.
JS is not PHP, you have to use $('#div1').css({ backgroundColor: '#'+cols1 }); instead of "#cols1".

answered Oct 26, 2014 at 22:50

ddlab

92817 silver badges29 bronze badges

Collectives™ on Stack Overflow

How do you modify the CSS using an input box in JQuery

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related