Assegnazione di variabili JavaScript con menu a discesa HTML (selezione utente)

Question

Sono nuovo di zecca su JavaScript quindi per favore abbiate pazienza con me! Sto costruendo un rompicapo e sto cercando di creare un modulo che permetta all'utente di scegliere le dimensioni del proprio puzzle. In passato, ho avuto le variabili per row (_r) e column (_c) impostato su 3 - ma quello che vorrei ora è una tabella di selezione HTML in cui l'utente può selezionare valori tra 3 e 5 per ciascuno e quindi generare la propria tabella.

Non so come assegnare correttamente _r e _c in base alla selezione dell'utente e tutto ciò che ho cercato riguardava moduli HTML diversi o non era altrimenti utile.

Inoltre, se qualcuno conosce una soluzione per questo: Prima ho creato il modulo tutto quello che avevo era un pulsante "Nuovo gioco" (e come ho detto, _r e _c erano entrambi impostati su 3), quando ho fatto clic su Nuovo Il pulsante di gioco ha funzionato perfettamente, ma se lo faccio di nuovo, continua a generare tavoli vuoti sotto quello originale che si aggiorna normalmente. Qualche idea su come prevenirlo? (questo è il motivo per cui ho la funzione clearPuzzle alla fine)

Grazie per qualsiasi intuizione.

Ecco il mio 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> 

e 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

capito: modulo() era en elemento in uso altrove, così ho cambiato il nome della funzione di sndForm() e anche modificati il ​​codice all'interno di tale funzione:

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

Sono preoccupato che la funzione form ha dichiarazioni variabili locali per le variabili _R e _C. Come variabili locali, saranno scartate all'uscita della funzione, mentre penso che tu stia cercando di assegnare a variabili globali (documento). Dovresti omettere la parola chiave var lì. Le variabili globali del documento devono essere dichiarate al di fuori di qualsiasi ambito di funzione.

---

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