键盘上的jQuery触发css

Question

I'm having trouble getting this short script to work. I want to set the width and height of a div by taking the values of input elements.

<input id="width" type="number" class="num" />
<input id="height" type="number" class="num" />
<br />
<br />
<div>
</div>

var w = +$('#width').val();
var h = +$('#height').val();

var width = w * 10;
var height = h * 10;

$('.num').keyup(function(){
$('div').css({
    'width' : width,
    'height' : height
});
});

JSFIDDLE

How can I get this to work?

Answer 1

Here's a quick version you can start working with that only adjusts the width. Once you get that working, then add height.

$('#width').keyup(function(){
  var w = $(this).val() * 10;
  $('div').css('width',w);
});

Updated fiddle: http://jsfiddle.net/djd0jqo1/12/

Answer 2

$('.num').keyup(function(){
  var w = +$('#width').val();
  var h = +$('#height').val();
  var width = w * 10;
  var height = h * 10;
  $('div').css({
    'width' : width,
    'height' : height
  });
});

You need to get the val the moment the person changes, they way you coded, it gets the value of width and height the moment the script is run, and it doesnt ever change.

Answer 3

$('.num').keyup(function(e){
 var w = +$('#width').val();
 var h = +$('#height').val();
 var width = w * 10;
 var height = h * 10;
if(width!=0)
{
$('div').css(
    'width' , width+"px"

)
}
  if(height!=0)
 {
  $('div').css('height',height+'px');
 }
 });