Zuweisen von JavaScript-Variablen mit HTML-Dropdown-Menü (Benutzerauswahl)

Question

Ich bin neu in JavaScript, also bitte tragen Sie mit mir! Ich baue ein Schiebepuzzle und versuche ein Formular zu erstellen, mit dem der Benutzer die Dimensionen seines Puzzles auswählen kann. In der Vergangenheit hatte ich die Variablen für Zeile (_r) und Spalte (_c) auf 3 gesetzt - aber was ich jetzt möchte, ist eine HTML-Auswahl-Tabelle, wo der Benutzer Werte zwischen 3 und 5 für jeden und dann auswählen kann Erzeuge eine eigene Tabelle.

Ich bin mir einfach nicht sicher, wie man _r und _c basierend auf der Benutzerauswahl richtig zuordnen kann, und alles, was ich gesucht habe, bezog sich auf verschiedene HTML-Formulare oder war nicht anderweitig hilfreich.

Auch wenn jemand eine Lösung dafür kennt: Bevor ich das Formular erstellt habe, hatte ich nur einen "New Game" Button (und wie ich schon sagte, _r und _c waren beide auf 3 gesetzt), als ich auf Neu klickte Spiel-Taste hat alles perfekt funktioniert, aber wenn ich es noch einmal anklicke, erzeugt es immer leere Tische unter der ursprünglichen, die normal auffrischt. Irgendwelche Ideen, wie man das verhindert? (deshalb habe ich am Ende die clearPuzzle Funktion)

Vielen Dank für einen Einblick.

Hier ist mein 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> 

und 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

es herausgefunden: Form() war en Element an anderer Stelle verwendet wird, so änderte ich den Funktionsnamen sndForm() und bearbeitet auch den Code innerhalb dieser Funktion:

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

Ich bin besorgt darüber, dass die Funktion form lokale Variablen Deklarationen hat für Variablen _R und _c. Als lokale Variablen werden sie beim Funktionsexit verworfen, während ich denke, dass Sie versuchen, (Dokumenten-) globalen Variablen zuzuordnen. Sie sollten das Schlüsselwort var dort weglassen. Globale Dokumentvariablen sollten außerhalb eines Funktionsumfangs deklariert werden.

---

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