使用HTML下拉菜单分配JavaScript变量（用户选择）

我对JavaScript是全新的，所以请容忍我！我正在构建一个滑块拼图，我正在尝试创建一个表单，允许用户选择他们拼图的尺寸。在过去，我已经将行（_r）和列（_c）的变量设置为3，但现在我想要的是一个HTML选择表，用户可以为每一个选择3到5之间的值，然后生成自己的表

我只是不知道如何根据用户的选择正确地分配_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>

选择尺寸：

排
3.
4.
5.
柱
3.
4.
5.

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

/*我以前没有表单函数：
_r=3；
_c=3；
*/
函数形式（）
{
var _r=document.getElementsByName（“行”）[0]。值；
var_c=document.getElementsByName（“列”）[0]。值；
}
函数init（r，c）
{
形式（）；
var puzzle=新的puzzarray（r，c）；
洗牌（拼图）；
显示拼图（拼图）；
addClickHandlers（）；
}
函数数组（r，c）
{
//声明并填充数组
var_数组=[]；
对于（变量i=0；i对于（var j=i；j我担心函数
表单
具有变量_r和_c的局部变量声明。作为局部变量，它们将在函数退出时被丢弃，而我认为您正在尝试分配给（文档）全局变量。您应该省略那里的
var
关键字。文档全局变量应该在任何函数范围之外声明


我想出来了：
form（）是其他地方使用的en元素，因此我将函数名更改为sndForm（），并编辑了该函数中的代码：

HTML:

你肯定让我走上了正确的道路。谢谢！我找到了答案并发布了我的解决方案
/*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;
}

<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>

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