'x'変数を変更すると2つの関数を更新する必要がありますが、1つしか更新しません。

Question

プログラミングにはとても新しいので、どこでこの問題を解決するかわかりません。私の脳は、なぜそれがうまくいかないのかという問題を見ていません。

'boxGrid' forループ関数と 'boxSize' CSS関数の両方に影響を与えるために、ボタンクリック時に 'x'変数を更新しようとしています。 gridGenは変更されず、私はまだ16 * 16（256）のデフォルトのボックスになってしまいますが、必要なサイズになっています。

編集：私は私のコンテナのdivのボックスの4列を得るでしょう、私が入る「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(); 
}); 

JsFiddleあなたは文字列を返すprompt()

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

ネイティブ機能をボックスを追加する前に、コンテナを空にする必要が

Answer 1

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

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

数

に鳴らし、あなたが remove()に removeClass()を変更するために必要な、これは以前に生成された要素を削除します。また

ボタンのクリックイベントに、あなたはboxSize()

例を呼び出す前にgridGen()を呼び出す必要があります：https://jsfiddle.net/gyr5djhy/3/

Answer 2

は、あなたは、STことを解析する必要がありますあなたのボタンクリックイベントでウォーキングバージョンhttps://jsfiddle.net/gyr5djhy/1/