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

Question

我正在通过Odin项目工作，尝试使用jQuery制作“蚀刻草图”类型的网站。这个想法是在其内部有一个网格，当被挖空时，网格正方形会改变颜色。用户还应该能够输入他们想要的网格正方形，所以如果他们在表格中放置了16个，他们将得到一个16x16的网格。

我将一个初始值设置为16.当我输入一个不同的数字并点击“去”时，该值只是变回到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)); 
    } 
});