I'm working through the odin project curriculum and am stuck on the sketchpad project. The assignment is to create a grid with jquery, have the squares fill in when hovered over, and then to have a button that clears the area and gives the option to change the # of squares in the area. In my code I am trying to change the number of squares in the grid with input from a prompt, but the variable isn't changing after I enter a different number into the 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 over
$('td').hover(function() {
$(this).addClass('fill')
});
//clear pad when button is clicked and set new area
$('button').click(function() {
$('td').removeClass('fill')
var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 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 would be appreciated!
Edit- using Waterscroll's solution I was able to change the grid using the user prompt, but now the individual elements won't fill when hovered over after the prompt, but will before the prompt. Any thoughts?
Edit- Fixed all problems, thanks to 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 over
var hoverOver = function() {
$('td').hover(function() {
$(this).addClass('fill');
console.log("filling");
});
}
//clear and create new table when button is clicked
var onClick = function() {
$('td').removeClass('fill')
var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
if (input != null) {
createTable(parseInt(input));
hoverOver();
} else {
createTable(16);
hoverOver();
}
};
答案 0 :(得分：0)
You will have to call an action on that input, or you will not see the variable being updated anywhere. It is best done by creating a function.
/**
Setup the area
*/
function updateArea( n ){
n = +n; // <-- convert string to nubmer, eg. "16" to 16
/**
Then do whatever has to be done to see the area
with the updated value
*/
$('#area').text( n ).css({
width: n,
height: n
});
}
$(document).ready(function() {
var area = 16;
updateArea( area );
$('button').click(function() {
var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
updateArea(input);
});
});
<script src='http://code.jquery.com/jquery.js'></script>
<button type="button">Clear Sketchpad</button>
<div id="area" style="background:gray;"></div>
答案 1 :(得分：0)
You have to execute the code again in order for the new area to 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 over
$('td').hover(function() {
$(this).addClass('fill')
});
}
createTable(16);
//clear pad when button is clicked and set new area
$('button').click(function() {
$('td').removeClass('fill')
var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
createTable(parseInt(input));
});
});
答案 2 :(得分：0)
Your logic is correct. The value of area does change. However, there 2 things missing.
When you load the page, you create the table. However, on the button click, you only change the value of Area but never creates the table again.
In order for new area value effective, you also need to clear the current table elements.
var area = 16;
$().ready(function()
{
drawtable();
$('button').click(function() {
$('td').removeClass('fill');
$('table').html("");
var input = prompt("enter desired area of new sketchpad (ex. \"16\" for a 16x16 grid, \"64\" for a 64x64 grid)","16");
area = input;
drawtable();
});
});
function drawtable()
{
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 over
$('td').hover(function() {
$(this).addClass('fill')
});
//clear pad when button is clicked and set new area
}