javascript - How to make button that changes grid dimensions using JS? -
i have created 16x16 grid. i'm trying put button above grid, when user clicks, prompt them new grid dimensions (between 1 , 64). example, if click button , input 25, dimensions of grid change 16x16 25x25.
i'm having trouble in figuring out how user's input javascript function, outputs updated grid. code here:
html:
<!doctype html> <html> <head> <title>sketchpad</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <h1> sketchpad </h1> <div id="container"> </div> <button class="button" type="button" onclick="myfunction()">choose grid</button> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.js"></script> </body> </html> css:
h1 { text-align: center; color: black; } tr, td, table { border-style: solid; border-width: 1px; background-color: gray; margin: auto; height: 25px; width: 525px; margin-top: 20px; } td { transition: .3s background-color; } td:hover { background-color: red; } button { height: 25px; width: 225px; margin: 0 auto; position: relative; top: 50%; left: 40%; margin-top: -40px; } javascript:
var rows=16; var cols=16; document.write("<table>"); (i=0; i<rows; i++) { document.write("<tr>"); (j=0; j<cols; j++) { document.write("<td>"+"</td>"); } document.write("</tr>"); } document.write("</table>"); $( "td").css("color", "red"); $(".button").click(function() { prompt("please select grid size"); }); function grid(rows, cols) { //function goes here// }
try following.
- write function empties container , redraws grid inside it.
- initialize grid in
document.ready()hander. - define event handler button click, prompts redraw grid @ user-defined size.
$(document).ready(function() { grid(16,16); }); $(".button").click(function() { var size = prompt("please select grid size"); grid(size, size); }); function grid(rows, cols) { var table = "<table>"; var size = (1 / rows * 525) + "px"; (i=0; i<rows; i++) { table += "<tr>"; (j=0; j<cols; j++) { table += "<td>"+"</td>"; } table += "</tr>"; } table += "</table>"; $("#container").empty().append(table); $("tr").css("height", size); $("td").css("color", "red").css("width", size); }h1 { text-align: center; color: black; } table { height: 525px; width: 525px; } tr, td, table { border-style: solid; border-width: 1px; background-color: gray; margin: auto; margin-top: 20px; } td { transition: .3s background-color; } td:hover { background-color: red; } button { height: 25px; width: 225px; margin: 0 auto; position: relative; top: 50%; left: 40%; margin-top: -40px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <h1> sketchpad </h1> <div id="container"> </div> <button class="button" type="button">choose grid</button>
Comments
Post a Comment