Javascript 改变'；x'；变量需要更新2个函数，但只更新一个

我对编程非常陌生，我不知道从哪里来解决这个问题。我的大脑只是没有看到为什么它不能工作的问题

我试图在单击按钮时更新“x”变量，以影响“gridGen”for循环函数以及“boxSize”css函数。gridGen没有改变，我仍然使用默认的16*16（256）个框，但是它们的大小是按需要的

编辑：假设我在提示符中输入'4'，我将在container div中得到4列框，但是水平行将继续沿着页面向下，总共256行

$(document).ready(function() {
  var x = 16;
    $('#button').mouseup(function() {
      this.blur()
    });
    $('#gridContainer').hover(function fill() {
      $('.gridBox').mouseenter(function() {
        $(this).addClass('fill');
      });
    });
    var gridGen = function() {
      for (var i = 0; i < x * x; i++) {
      var $gridBox = $('<div class="gridBox"></div>');
      $('#gridContainer').append($gridBox);
      }
    };
    var boxSize = function() {
      var size = 640 / x;
      $('.gridBox').css('width', size).css('height', size);
    };
    $('#button').click(function() {
      $('.gridBox').removeClass('fill');
      //i need this to update x in 'gridGen' function
      //only seems to update in 'boxSize' function
      x = prompt('Enter Dimensions', 'square of...');
      boxSize();
      gridGen();
    });
    boxSize();
    gridGen();
});

$（文档）.ready（函数（）{
var x=16；
$（“#按钮”）.mouseup（函数（）{
这个。blur（）
});
$（'#gridContainer'）。悬停（函数填充（）{
$（'.gridBox'）.mouseenter（函数（）{
$（this.addClass（'fill'）；
});
});
var gridGen=函数（）{
对于（变量i=0；i

---

在添加箱子之前，您需要清空容器

var gridGen = function() {
  $('#gridContainer').empty()
    for (var i = 0; i < (x * x); i++) {
      var gridBox = $('<div class="gridBox"></div>');
      $('#gridContainer').append(gridBox);
    }
};

---

在按钮单击事件中，您需要将

removeClass（）

更改为

remove（）

，这将删除以前生成的元素

另外，在按钮单击事件中，在调用

boxSize（）

---

示例：

请在JSFIDLE:）上发布一个精简的函数示例。我应该精简什么？我不确定什么是多余的。我得到了一个JSFIDLE版本，并在文章底部链接。这似乎以最简单的方式解决了我的问题，非常感谢！

p = prompt('Enter Dimensions', 'square of...');

n = parseInt(p, 10)
if (!isNaN(n)) {
  x = n
}