javascript - Input value not changing with user input -

i'm working way through odin project, attempting make "etch-a-sketch" type website jquery. idea have div grid inside of when moused over, grid squares change color. user should able input how many grid squares want, if put 16 in form, they'll 16x16 grid.

i set initial value 16. when input different number , hit "go", value changes 16 , grid remains same. going wrong?

thanks!

relevant code follows:

html:

<form>     <label>enter width in pixels:</label>     <input id="formbox" type="text" value="16">     <input id="setwidth" class="buttons" type="submit" value="go!">     <button id="reset" class="buttons" type="reset">reset</button> </form> 

js:

$('#setwidth').click(function () {     $('.box').css("background-color", "#fff");     $('.box').remove();      var $divwidth = $('#formbox').val();      (var = 0; < $divwidth; i++) {         $('#canvas').append('<div class="divholder"></div>');         $('.divholder').css("height", math.floor(500 / $divwidth));     }      for(var = 0; < $divwidth; i++) {         $('.divholder').append('<div class="box"></div>');         $('.box').css("width", math.floor(500 / $divwidth));         $('.box').css("height", math.floor(500 / $divwidth));     } }); 

you should able use preventdefault() function on event.

this function stops default behaviour (in instance, refresh of page behaviour should expected default).

$('#setwidth').click(function (e) {     e.preventdefault();     $('.box').css("background-color", "#fff");     $('.box').remove();      var $divwidth = $('#formbox').val();      (var = 0; < $divwidth; i++) {         $('#canvas').append('<div class="divholder"></div>');         $('.divholder').css("height", math.floor(500 / $divwidth));     }      for(var = 0; < $divwidth; i++) {         $('.divholder').append('<div class="box"></div>');         $('.box').css("width", math.floor(500 / $divwidth));         $('.box').css("height", math.floor(500 / $divwidth));     } });