Javascript 在提示下更改变量

我正在完成odin项目课程，我被困在画板项目上。任务是使用jquery创建一个网格，当鼠标悬停在上方时填充正方形，然后使用一个按钮清除该区域，并提供更改该区域中的#个正方形的选项。在我的代码中，我试图通过提示符输入来更改网格中的方块数，但在提示符中输入不同的数字后，变量没有改变

我的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;

});
});

$（文档）.ready（函数（）{
//创建表
var面积=16；
对于（i=0；i您必须对该输入调用一个操作，否则您将看不到变量在任何地方被更新。最好通过创建一个函数来完成

/**
设置区域
*/
函数updateArea（n）{
n=+n；//您必须再次执行代码才能使新区域生效

$(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));

});
});

$（文档）.ready（函数（）{
函数createTable（区域）{
//创建表
$（'table'）.empty（）；
对于（i=0；i而言，您的逻辑是正确的。面积的值确实发生了变化。但是，缺少两件事

加载页面时，您创建了表。但是，在单击按钮时，您只更改了Area的值，而不再创建表

为了使新区域值有效，还需要清除当前表元素

var面积=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

}

$（）.ready（函数（））
{
绘图台（）；
$（“按钮”）。单击（函数（）{
$（'td'）.removeClass（'fill'）；
$（'table'）.html（“”）；
var input=prompt（“输入新画板的所需区域（例如16x16网格为“16”，64x64网格为“64”），“16”）；
面积=输入；
绘图台（）；
});
});
函数drawtable（）
{
对于（i=0；i
什么使您认为变量没有改变？您没有任何代码在更改变量后重新绘制表。
area=parseInt（input）；
append（“”）
可以是
append（“”）
也许有一些额外的见解来自：谢谢！我可以在提示下更改网格，但现在鼠标悬停在新网格上不起作用，试图弄清楚这是怎么回事
$(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));

});
});

$().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

}