How to make button that changes grid dimensions using JS?

Question

I have created a 16x16 grid. I'm trying to put a button above the grid, which when the user clicks, will prompt them for new grid dimensions (between 1 and 64). For example, if you click the button and input 25, the dimensions of the grid will change from 16x16 to 25x25.

I'm having trouble in figuring out how to get the user's input into a javascript function, so it outputs the 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 Your 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>");
for (i=0; i<rows; i++) {
document.write("<tr>");
  for (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 your grid size");
});

function grid(rows, cols) {
//function goes here//
}

If the javascript code is contained in an outer file, it is never included in the html — yaakov
– yaakov, Commented Jul 7, 2015 at 19:01
Are you referring to this line? <button class="button" type="button" onclick="myFunction()">Choose Your Grid</button> — DumplingKing
– DumplingKing, Commented Jul 7, 2015 at 19:07
no, i'm referring to the fact that in your <script src=""></script> there is no reference to the file with the javascript. unless you named it jquery.js. did you? — yaakov
– yaakov, Commented Jul 7, 2015 at 19:14
yes, i did name it jquery.js. and it appears to work fine. i'm confused...also new to this, so maybe i'm missing something. — DumplingKing
– DumplingKing, Commented Jul 7, 2015 at 19:17

Dave · Accepted Answer · 2015-07-07 20:17:41Z

2

Try something like the following.

Write a function which empties your container and redraws your grid inside it.
Initialize your grid in a document.ready() hander.
Define an event handler for your button click, which prompts to redraw the grid at a user-defined size.

$(document).ready(function() {
  grid(16,16);
});

$(".button").click(function() {
  var size = prompt("Please select your grid size");
  grid(size, size);
});

function grid(rows, cols) {
  var table = "<table>";
  var size = (1 / rows * 525) + "px";
  
  for (i=0; i<rows; i++) {
    table += "<tr>";
    for (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 Your Grid</button>

edited Jul 7, 2015 at 20:17

answered Jul 7, 2015 at 19:24

Dave

11k3 gold badges45 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

DumplingKing Over a year ago

Thanks for this Dave. I will work with this and try to make some adjustments. The two things I would change: I want the boxes to stay square and not change to rectangles based on dimensions. And second, I want the grid to stay within the same sized box container, so there are just MORE boxes within it, instead of expanding the entire size of the grid.

Dave Over a year ago

OK I fixed the code so the inside cells stay square and all remain the same size. Is that what you want?

DumplingKing Over a year ago

this looks great in terms of the square boxes. now it's just that the size of the entire grid gets bigger or smaller depending on the dimensions. instead of keeping the exact same size outer grid, and just changing the grids inside it.

Collectives™ on Stack Overflow

How to make button that changes grid dimensions using JS?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related