Assigning JavaScript variables with HTML drop-down menu (user choice)

Question

I'm new to JavaScript, so please bear with me! I am creating a slider puzzle, and I am trying to create a shape that allows the user to choose the size of their puzzle. I used to have variables for row (_r) and column (_c) that were set to 3, but now I need an HTML selection table in which the user can select values ​​from 3 to 5 for each, and then generate their own table.

I just don’t know how to properly assign _r and _c based on user choice, and everything I was looking for is related to different HTML formats or didn't help others.

Also, if anyone knows about this for fixing: before I created the form, I had a “New game” button (and, as I said, _r and _c were set to 3) when I pressed the button The "new game" everything works fine, but if I click on it again, it will generate empty tables under the original one, which updates normally. Any ideas how to prevent this? (that's why I have a clearPuzzle function at the end)

Thank you for your understanding.

Here is my 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> 

and 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

It turned out: form () was an en element that was used elsewhere, so I changed the name of the function to sndForm (), and also edited the code inside this function:

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

I am worried that the form function has local variable declarations for the _r and _c variables. Like local variables, they will be discarded when the function exits, whereas I think you are trying to assign global variables (document). You should omit the var keyword there. Document global variables must be declared out of scope.

---

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