HTMLでJavaScript変数を割り当てるドロップダウンメニュー（ユーザ選択）

Question

私はJavaScriptの新機能ですので、私と一緒にご負担ください！私はスライダーパズルを構築しています。ユーザーがパズルの寸法を選ぶことを可能にするフォームを作成しようとしています。過去には、行（_r）と列（_c）の変数を3に設定しましたが、私が今思うのは、ユーザーがそれぞれ3〜5の値を選択できるHTML選択表です独自のテーブルを生成します。

私はユーザーの選択に基づいて_rと_cを適切に割り当てる方法がわかりません。また、私が検索したすべてのものは、さまざまなHTMLフォームに関連していました。

また、誰かがこのための修正を知っている場合：私が持っていたすべてのフォームを作成する前に（私が言ったように、_rと_cは両方とも3に設定されていました）ゲームのボタンはすべて正常に機能しましたが、もう一度クリックすると、元のテーブルの下に空のテーブルが生成され、通常は更新されます。どのようにそれを防ぐためにどのようなアイデア？ （これは私が最後にclearPuzzle関数を持っている理由です）

ありがとうございました。ここで

は私のHTMLです：

<p>Choose Dimensions: </p> 
    <select name="Rows" onchange="form()"> 
     <option value="Rows" selected disabled>Rows</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
    </select> 
    <select name="Columns" onchange="form()"> 
     <option value="Columns" selected disabled>Columns</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
    </select> 


<input type="button" name="button" value="New Game" onclick="init(_r, _c)"></button> 

とJavaScript：

/*what I had before with no form function: 
_r = 3; 
_c = 3; 
*/ 

function form() 
    { 
     var _r = document.getElementsByName("Rows")[0].value; 
     var _c = document.getElementsByName("Columns")[0].value; 
    } 

function init(r, c) 
{ 
    form(); 
    var puzzle = new puzzleArray(r, c); 
    shuffle(puzzle); 
    displayPuzzle(puzzle); 
    addClickHandlers(); 
} 

function puzzleArray(r, c) 
{ 
    //declare and populate array 
    var _array = []; 

    for (var i = 0; i < r*c; i++) 
    { 
     _array[i] = i; 
    } 
    return _array; 
} 

function shuffle(_array) 
{ 
//shuffle tiles 
for (var i = 0; i < _r*_c; i++) 
{ 
    var rand = Math.floor(Math.random() * _array.length); 
    var temp = _array[rand]; 
    _array[rand] = _array[i]; 
    _array[i] = temp; 
} 

//check to see if puzzle is solveable 
var count = 0; 
do { 
for (var i = 0; i < _r*_c; i++) 
{ 
    for (var j = i; j <= _r*_c; j++) 
    { 
     if (_array[j] < _array[i]) 
     { 
     count++; 
     } 
    } 
} 
} while (Math.floor(count/2) != count/2); 

} 


function displayPuzzle(anArray) 
{ 
    //create table 
    var table = document.createElement("table"); 
    table.id = "myTable"; 

    for (var i = 0; i < _r; i++) 
    { 
     var row = document.createElement('tr'); 
     for (var j = 0; j < _c; j++) 
     { 
     var column = document.createElement('td'); 
     row.appendChild(column);  
     } 
     table.appendChild(row); 
    } 
    document.body.appendChild(table); 

    //populate cells with their original and shuffled values. 
    for (var i = 0; i < _r*_c; i++) 
    { 
     document.getElementsByTagName("td")[i].innerHTML = "Cell: " + [i] + ", " + "Value: " + anArray[i]; 

     if (anArray[i] == 0) 
     { 
      document.getElementsByTagName("td")[i].innerHTML = "Cell: " + [i] + ", " + "Value: " + "Blank!"; 
     } 
    } 

    //specify classes for each cell 
    var _cell = document.getElementsByTagName("td"); 
    for (var i = 0; i < _r*_c; i++) 
    { 
     _cell[i].id = "s" + [i]; 
    } 

} 

function addClickHandlers() 
{ 
    for (var i = 0; i < _r*_c; i++) 
    { 
     var cells = document.getElementsByTagName("td"); 
     cells[i].onclick = moveTile; 
    } 
} 

function moveTile() 
{ 

     this.innerHTML += "!!!"; //just experimenting 
} 

//not working yet 
function clearPuzzle() 
{ 
    var puzzle = new puzzleArray(r, c); 
    shuffle(puzzle); 
} 

Answer 1

それを考え出した： フォーム（）は、他の場所で使用されている要素途中だったので、私は（sndFormに関数名を変更し）、また、その関数内のコードを編集：

HTML：

<select id = "_rows" onchange="sndForm()"> 
    <option value="Rows" selected disabled>Rows</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 
<select id="_columns" onchange="sndForm()"> 
    <option value="Columns" selected disabled>Columns</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
</select> 

はJavaScript：

var _r; 
var _c; 
var row; 
var col; 

function init(_r, _c) 
{ 
    //alert(_r); 
    //alert(_c); 
    sndForm(); 
    var puzzle = new puzzleArray(_r, _c); 
    shuffle(puzzle); 
    displayPuzzle(puzzle); 
    //alert(puzzle); 
    startTimer(); 
    addClickHandlers(); 
} 

function sndForm() 
{ 
    row = document.getElementById("_rows"); 
    col = document.getElementById("_columns"); 
    _r = row.options[row.selectedIndex].value; 
    _c = col.options[col.selectedIndex].value; 
} 

Answer 2

私は機能formは_rと_c変数のローカル変数の宣言を持っていることを心配します。ローカル変数として、それらは関数の終了時に破棄されますが、私はあなたがグローバル変数に（ドキュメント）を割り当てようとしていると思います。キーワードvarは省略してください。ドキュメントのグローバル変数は、関数スコープの外で宣言する必要があります。

---

/*what I had before with no form function: 
_r = 3; 
_c = 3; 
*/ 
var _r; // declare _r & _c as document global variables 
var _c; 

function form() 
{ 
    // assign to the document global variables. 
    _r = document.getElementsByName("Rows")[0].value; 
    _c = document.getElementsByName("Columns")[0].value; 
}