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));     } });

-

Popular posts from this blog

javascript - Js, document.getElementById("ID").innerHTML, error -

hello i'm new javascript, , i'm try write out code test site , i'm having problems, dow below code , keep getting error , can't figure out why. typeerror: null not object (evaluating 'document.getelementbyid("h3").innerhtml = "<h3>you date!</h3>"') this second method tried using. i'm trying have have version list first 1 had pull .js file , build table, didn't work thought try this, guess happened? not working my code i'm using below. if can amazing. thanks, dakmessier var current = "1.0"; function get_latest(){ document.getelementbyid("bob").innerhtml = current; } if (local != current){ document.getelementbyid("get").innerhtml = "<button><a href=\"bla\">get latest update!</a></button>"; } else if (local == current){ document.getelementbyid("h3").innerhtml = "<h3>you date!</h3>"; } else { document.g...
Read more

objective c - Is there a way in OCMockito to make stubs fail when an unknown method is called? -

when creating stub in ocmockito, use calls stub out method calls , return values: [given([stubobject mymethod]) willreturn:somevalue]; the problem have if don't define method method gets called during test, default seems to return nil . can lead sneaky bugs since real methods asserted never return nil , therefore return value not tested in code calling method. is there way change default behavior or maybe test if called on object apart few methods i'm stubbing? no, ocmockito stubs "nice". if want "strict" stubs, ocmock may suit better.
Read more

jquery - jqGrid update specific column data with out refreshing the entire column? -

i using jqgrid in project . want update/refresh specific column data out refreshing entire grid. please give me idea that. here possible solution. can use 'setcell' in jqgrid set value specific cell in column. see fiddle here: https://jsfiddle.net/99x50s2s/4/ i hope above fiddle give idea complete task. <table id="sg1"></table> <div id="psg1"></div> <br> <button type="button" id="setcolumnbtn">update 'amount' column</button> jquery("#sg1").jqgrid({ datatype: "local", gridview: true, loadonce: true, shrinktofit: false, autoencode: true, height: 'auto', viewrecords: true, sortorder: "desc", scrollrows: true, loadui: 'disable', colnames:['inv no','date', 'client', 'amount','tax','total','notes'], colmodel:[ {name:...
Read more