使用HTML下拉菜单分配JavaScript变量(用户选择)

概述我是 JavaScript的新手,所以请耐心等待！我正在构建一个滑块拼图,我正在尝试创建一个允许用户选择拼图尺寸的表单.在过去,我已经将行(_r)和列(_c)的变量设置为3 – 但我现在想要的是一个HTML选择表,用户可以在其中为每个选择3到5之间的值,然后生成自己的表. 我只是不确定如何根据用户的选择正确分配_r和_c,我搜索的所有内容都与不同的HTML表单相关或者没有其他帮助. 此外,如果有人 我是 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 yetfunction clearPuzzle(){   var puzzle = new puzzleArray(r,c);   shuffle(puzzle);}

解决方法 我担心函数形式有变量_r和_c的局部变量声明.作为局部变量,它们将在函数退出时被丢弃,而我认为您正在尝试分配给(文档)全局变量.你应该在那里省略var关键字.文档全局变量应在任何函数范围之外声明.

/*what I had before with no form function: _r = 3;_c = 3;*/var _r;    // declare _r & _c as document global variablesvar _c;function form(){  // assign to the document global variables.  _r = document.getElementsByname("Rows")[0].value;  _c = document.getElementsByname("Columns")[0].value;}

总结

以上是内存溢出为你收集整理的使用HTML下拉菜单分配JavaScript变量(用户选择)全部内容，希望文章能够帮你解决使用HTML下拉菜单分配JavaScript变量(用户选择)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。