輸入值不隨用戶輸入而改變

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)); 
    } 
});