Javascript 输入值不随用户输入而更改

我正在努力完成Odin项目，试图用jQuery创建“蚀刻草图”类型的网站。这样做的目的是让一个div里面有一个网格，当鼠标移到上面时，网格方块会改变颜色。用户还应该能够输入他们想要的网格正方形的数量，因此如果他们在表单中输入16，他们将得到一个16x16的网格

我将初始值设置为16。当我输入一个不同的数字并点击“go”时，值会变回16，网格保持不变。我哪里做错了

谢谢

有关守则如下：

HTML:

输入宽度（以像素为单位）：
重置

JS:

$（'#setWidth'）。单击（函数（）{
$（'.box'）.css（“背景色”，“#fff”）；
$（'.box'）.remove（）；
var$divWidth=$（'#formbox'）.val（）；
对于（变量i=0；i<$divWidth；i++）{
$（'#canvas'）。追加（''）；
$（'.divHolder'）.css（“高度”，数学地板（500/$divWidth））；
}
对于（变量i=0；i<$divWidth；i++）{
$（'.divHolder'）。追加（''）；
$（'.box'）.css（“宽度”，数学地板（500/$divWidth））；
$（'.box'）.css（“高度”，数学地板（500/$divWidth））；
}
});

您应该能够对事件使用

preventDefault（）

函数

此函数用于停止默认行为（在本例中，页面刷新是默认情况下应该出现的行为）

$（'#setWidth'）。单击（函数（e）{
e、 预防默认值（）；
$（'.box'）.css（“背景色”，“#fff”）；
$（'.box'）.remove（）；
var$divWidth=$（'#formbox'）.val（）；
对于（变量i=0；i<$divWidth；i++）{
$（'#canvas'）。追加（''）；
$（'.divHolder'）.css（“高度”，数学地板（500/$divWidth））；
}
对于（变量i=0；i<$divWidth；i++）{
$（'.divHolder'）。追加（''）；
$（'.box'）.css（“宽度”，数学地板（500/$divWidth））；
$（'.box'）.css（“高度”，数学地板（500/$divWidth））；
}
});

好吧，您正在提交表单，重新加载页面，当使用

提交
按钮时，您期望得到什么？与此同时，用户可能会将
type=“submit”
更改为
type=“button”
@SpencerWieczorek不，一点也不会。再看一下这个片段（我添加了一个示例）。您可以自己尝试，不需要更改类型。@SysVoid我认为您丢失了我的消息，我只是说它更合适，因为按钮显然不是用于提交的。从技术上讲，他们仍然在提交数据，即使没有刷新。我想这可能是个人的看法。@SpencerWieczorek我想这是一种看待它的方式，但如果我们坚持OP想要的东西可能是个好主意，以防有一些奇怪的原因（我想不起来，哈哈）。
<form>
    <label>Enter the width in pixels:</label>
    <input id="formbox" type="text" value="16">
    <input id="setWidth" class="buttons" type="submit" value="Go!">
    <button id="reset" class="buttons" type="reset">Reset</button>
</form>

$('#setWidth').click(function () {
    $('.box').css("background-color", "#fff");
    $('.box').remove();

    var $divWidth = $('#formbox').val();

    for (var i = 0; i < $divWidth; i++) {
        $('#canvas').append('<div class="divHolder"></div>');
        $('.divHolder').css("height", Math.floor(500 / $divWidth));
    }

    for(var i = 0; i < $divWidth; i++) {
        $('.divHolder').append('<div class="box"></div>');
        $('.box').css("width", Math.floor(500 / $divWidth));
        $('.box').css("height", Math.floor(500 / $divWidth));
    }
});

$('#setWidth').click(function (e) {
    e.preventDefault();
    $('.box').css("background-color", "#fff");
    $('.box').remove();

    var $divWidth = $('#formbox').val();

    for (var i = 0; i < $divWidth; i++) {
        $('#canvas').append('<div class="divHolder"></div>');
        $('.divHolder').css("height", Math.floor(500 / $divWidth));
    }

    for(var i = 0; i < $divWidth; i++) {
        $('.divHolder').append('<div class="box"></div>');
        $('.box').css("width", Math.floor(500 / $divWidth));
        $('.box').css("height", Math.floor(500 / $divWidth));
    }
});