javascript - 输入值不随用户输入而改变

Question

我正在 Odin 项目中工作，尝试使用 jQuery 制作“etch-a-sketch”类型的网站。这个想法是让一个 div 里面有一个网格，当鼠标悬停在上面时，网格方 block 会改变颜色。用户还应该能够输入他们想要多少个网格方 block ，因此如果他们在表单中输入 16，他们将得到一个 16x16 的网格。

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

谢谢!

相关代码如下:

HTML:

<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>

JS:

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

Answer 1

您应该能够在该事件上使用 preventDefault() 函数。

此函数停止默认行为(在本例中，页面刷新是默认情况下应该发生的行为)。

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