使用HTML下拉菜單分配JavaScript變量（用戶選擇）

Question

我是JavaScript的新手，所以請耐心等待！ 我正在構建一個滑塊拼圖，我正在嘗試創建一個允許用戶選擇拼圖尺寸的表單。 在過去，我已經將行（_r）和列（_c）的變量設置為3 - 但我現在想要的是一個HTML選擇表，用戶可以在其中為每個選擇3到5之間的值，然后生成自己的表。

我只是不確定如何根據用戶的選擇正確分配_r和_c，我搜索的所有內容都與不同的HTML表單相關或者沒有其他幫助。

此外，如果有人知道這個問題的解決方法：在我創建表單之前，我所擁有的只是一個“新游戲”按鈕（就像我說的那樣，_r和_c都設置為3），當我點擊New Game按鈕時，一切正常完美，但如果我再次點擊它，它會在原始表格下方生成空表，這些表格會正常刷新。 任何想法如何預防？ （這就是我最后有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

我擔心函數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;
}

Answer 2

弄清楚：form（）是在其他地方使用的元素，所以我將函數名稱更改為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;
}