Przypisywanie zmiennych JavaScript z rozwijanym menu HTML (wybór użytkownika)

Question

Jestem nowicjuszem w JavaScript, więc proszę o zachowanie mnie! Buduję układankę z suwakiem i próbuję stworzyć formularz, który pozwoli użytkownikowi wybrać wymiary swojej układanki. W przeszłości miałem zmienne dla wiersza (_r) i kolumny (_c) ustawione na 3 - ale teraz chciałbym wybrać tabelę wyboru HTML, w której użytkownik może wybrać wartości od 3 do 5 dla każdego, a następnie wygenerować własną tabelę.

Po prostu nie jestem pewien, jak prawidłowo przypisać _r i _c w oparciu o wybór użytkownika, a wszystko, co szukałem, dotyczyło różnych formularzy HTML lub w inny sposób nie było pomocne.

Ponadto, jeśli ktoś ma jakąś poprawkę: Zanim utworzyłem formularz, wszystko, co miałem, to przycisk "Nowa gra" (i jak już powiedziałem, _r i _c były ustawione na 3), kiedy kliknąłem na Nowy Przycisk gry wszystko działało idealnie, ale jeśli kliknę to jeszcze raz, to generuje puste tabele poniżej oryginału, który normalnie się odświeża. Jakieś pomysły, jak temu zapobiec? (dlatego na koniec mam funkcję clearPuzzle)

Dziękuję za wszelki wgląd.

Tu jest mój 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> 

i 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

Zdobione: forma() był en element jest używany w innym miejscu, więc zmieniłem nazwę funkcji do sndForm(), a także edytować kod wewnątrz tej funkcji:

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

Martwię się, że funkcja form ma lokalne deklaracje zmiennych na zmienne _R i _C. Jako zmienne lokalne będą one odrzucane przy wyjściu funkcji, podczas gdy ja myślę, że próbujesz przypisać do (dokumentu) zmiennych globalnych. W tym miejscu należy pominąć słowo kluczowe var. Zmienne globalne dokumentu powinny być zadeklarowane poza jakimkolwiek zakresem funkcji.

---

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