javascript - changing variable with prompt -
i'm working through odin project curriculum , stuck on sketchpad project. assignment create grid jquery, have squares fill in when hovered over, , have button clears area , gives option change # of squares in area. in code trying change number of squares in grid input prompt, variable isn't changing after enter different number prompt.
my javascript-
$(document).ready(function() { //create table var area = 16; for(i=0;i<area;i++) { $('table').append('<tr></tr>') }; for(i=0;i<area;i++) { $('tr').append('<td></td>') }; //fill in background when hovered on $('td').hover(function() { $(this).addclass('fill') }); //clear pad when button clicked , set new area $('button').click(function() { $('td').removeclass('fill') var input = prompt("enter desired area of new sketchpad (ex. \"16\" 16x16 grid, \"64\" 64x64 grid)","16"); area = input; }); }); my html-
<!doctype html> <html lang="en"> <head> <title>skethpad</title> <link rel="stylesheet" type="text/css" href="style.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="script.js"></script> </head> <body> <button type="button">clear sketchpad</button> <div id="container"> <table> </table> </div> </body> </html> any helps or pointers appreciated!
edit- using waterscroll's solution able change grid using user prompt, individual elements won't fill when hovered on after prompt, before prompt. thoughts?
edit- fixed problems, everyone's help! here's how y working javascript looked
$(document).ready(function() { createtable(16); hoverover(); }); //create table var createtable = function(area) { $('table').empty(); for(i=0;i<area;i++) { $('table').append('<tr></tr>') }; for(i=0;i<area;i++) { $('tr').append('<td></td>') }; }; //fill in <td> elements when hovered on var hoverover = function() { $('td').hover(function() { $(this).addclass('fill'); console.log("filling"); }); } //clear , create new table when button clicked var onclick = function() { $('td').removeclass('fill') var input = prompt("enter desired area of new sketchpad (ex. \"16\" 16x16 grid, \"64\" 64x64 grid)","16"); if (input != null) { createtable(parseint(input)); hoverover(); } else { createtable(16); hoverover(); } };
you have execute code again in order new area take effect.
$(document).ready(function() { function createtable(area) { //create table $('table').empty(); for(i=0;i<area;i++) { $('table').append('<tr></tr>') }; for(i=0;i<area;i++) { $('tr').append('<td></td>') }; //fill in background when hovered on $('td').hover(function() { $(this).addclass('fill') }); } createtable(16); //clear pad when button clicked , set new area $('button').click(function() { $('td').removeclass('fill') var input = prompt("enter desired area of new sketchpad (ex. \"16\" 16x16 grid, \"64\" 64x64 grid)","16"); createtable(parseint(input)); }); }); 
Comments
Post a Comment