I am brand new to JavaScript so please bear with me! I'm building a slider puzzle, and I'm trying to create a form that will allow the user to pick the dimensions of their puzzle. In the past, I've had the variables for row (_r) and column (_c) set to 3 - but what I'd like now is an HTML select table where the user can pick values between 3 and 5 for each and then generate their own table.

I'm just not sure how to properly assign _r and _c based on the user's selection, and everything I've searched related to different HTML forms or wasn't otherwise helpful.

Also, if anyone knows a fix for this: Before I created the form all I had was a "New Game" button (and like I said, _r and _c were both set to 3), when I clicked the New Game button everything worked perfectly, but if I click it again it keeps generating empty tables beneath the original one which refreshes normally. Any ideas how to prevent that? (this is why I have the clearPuzzle function at the end)

Thank you for any insight.

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);
}

I am brand new to JavaScript so please bear with me! I'm building a slider puzzle, and I'm trying to create a form that will allow the user to pick the dimensions of their puzzle. In the past, I've had the variables for row (_r) and column (_c) set to 3 - but what I'd like now is an HTML select table where the user can pick values between 3 and 5 for each and then generate their own table.

I'm just not sure how to properly assign _r and _c based on the user's selection, and everything I've searched related to different HTML forms or wasn't otherwise helpful.

Also, if anyone knows a fix for this: Before I created the form all I had was a "New Game" button (and like I said, _r and _c were both set to 3), when I clicked the New Game button everything worked perfectly, but if I click it again it keeps generating empty tables beneath the original one which refreshes normally. Any ideas how to prevent that? (this is why I have the clearPuzzle function at the end)

Thank you for any insight.

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);
}

• javascript
• html

Share Improve this question Follow edited Oct 19, 2015 at 23:27 user5407906 asked Oct 19, 2015 at 22:45 user5407906user5407906 8711 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

I'm concerned that the function form has local variables declarations for variables _r and _c. As local variables, they will be discarded on function exit, whereas I think you are trying to assign to (document) global variables. You should omit the var keyword there. Document global variables should be declared outside of any function 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;
}

Figured it out: form() was en element being used elsewhere, so I changed the function name to sndForm() and also edited the code within that 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;
}