populate a table with arrays but getting undefined

Question

I am trying to populate a table with randomly generated numbers from 1 to 15 with no repeats. The code I'm using just keeps displaying "undefined" in all the cells.I think the problem is with the random part but can't figure out why it's going wrong.

function setup()
        {
            cells = new Array([document.getElementById("cell00"),
                              document.getElementById("cell01"),
                              document.getElementById("cell02"),
                              document.getElementById("cell03")],
                              [document.getElementById("cell10"),
                              document.getElementById("cell11"),
                              document.getElementById("cell12"),
                              document.getElementById("cell13")],
                              [document.getElementById("cell20"),
                              document.getElementById("cell21"),
                              document.getElementById("cell22"),
                              document.getElementById("cell23")],
                             [document.getElementById("cell30"),
                              document.getElementById("cell31"),
                              document.getElementById("cell32"),
                             document.getElementById("cell33")]);
            placeValues(cells);
            
            
        }
        
        function placeValues(cells)
        {
            var numbers = new Array();
            var randomLoc;
            var temp;
            
            for (var i = 0; i < 16; i++)
                {
                    randomLoc = Math.floor(Math.random() * 15 + 1);
                    temp = numbers[i];
                    numbers[i] = numbers[randomLoc];
                    numbers[randomLoc] = temp;
                }
            i = 0;
            for (var rows = 0; rows<4; rows++)
                {
                    for (var cols = 0; cols < 4; cols++)
                        {
                            if (numbers[i] !=0)
                                cells[rows][cols].innerHTML = numbers[i];
                            else
                            {
                                cells[rows][cols].innerHTML = "";
                                i++;
                            }
                            
                        }
                }
        }

<html>
<head>
<script></script>
</head>
<body onload="setup()">
<div id="content">    
    <p>You can move any number into an empty spot by moving up, down,
    right, or left. Diagonal moves are not allowed. The object is
    to get all the numbers into correct order, from 1 through 15
    with the empty space at the end.</p>
    <table width="60%" align="center">
    <tr>
        <td height="60"><span id="cell00"></span></td>
        <td><span id="cell01"></span></td>
        <td><span id="cell02"></span></td>
        <td><span id="cell03"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell10"></span></td>
        <td><span id="cell11"></span></td>
        <td><span id="cell12"></span></td>
        <td><span id="cell13"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell20"></span></td>
        <td><span id="cell21"></span></td>
        <td><span id="cell22"></span></td>
        <td><span id="cell23"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell30"></span></td>
        <td><span id="cell31"></span></td>
        <td><span id="cell32"></span></td>
        <td><span id="cell33"></span></td>        
        </tr>   
    </table>
    
</div>
</body>

It displays "undefined" in all of the cells which tells me for some reason either the numbers array or the column of the cells array is not being populated. Could you help me out?

You create `numbers` as an empty array. If you then swap values in it, that will not change anything to the fact you did not put any values in it in the first place. — trincot, Oct 29 '18 at 20:40
Thank you! I added another for loop and initialized the numbers array to 1 - 15 and it worked! — Mishelbi, Oct 29 '18 at 20:47
`Array(15).fill().map((v,i)=>i+1).sort(()=>Math.random()>.5 ?1 : -1)` There are better random sorting algorithms https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — epascarello, Oct 29 '18 at 20:48

score 0 · Answer 1 · answered Oct 29 '18 at 20:49

There were two issues:

The numbers array was never initialised with values, so swapping had no effect.
The increment of i in the final loop should happen always.

Side note: The shuffling algorithm seems not optimal. Have a look at How to Randomise/Shuffle a JavaScript Array.

function setup()
        {
            cells = new Array([document.getElementById("cell00"),
                              document.getElementById("cell01"),
                              document.getElementById("cell02"),
                              document.getElementById("cell03")],
                              [document.getElementById("cell10"),
                              document.getElementById("cell11"),
                              document.getElementById("cell12"),
                              document.getElementById("cell13")],
                              [document.getElementById("cell20"),
                              document.getElementById("cell21"),
                              document.getElementById("cell22"),
                              document.getElementById("cell23")],
                             [document.getElementById("cell30"),
                              document.getElementById("cell31"),
                              document.getElementById("cell32"),
                             document.getElementById("cell33")]);
            placeValues(cells);
            
            
        }
        
        function placeValues(cells)
        {
            var numbers = [...Array(16).keys()]; // Generate array with values 0..15
            var randomLoc;
            var temp;
            
            for (var i = 0; i < 16; i++)
                {
                    randomLoc = Math.floor(Math.random() * 15 + 1); 

                    temp = numbers[i];
                    numbers[i] = numbers[randomLoc];
                    numbers[randomLoc] = temp;
                }
            i = 0;
            for (var rows = 0; rows<4; rows++)
                {
                    for (var cols = 0; cols < 4; cols++)
                        {
                            if (numbers[i] != 0)
                                cells[rows][cols].innerHTML = numbers[i];
                            else
                            {
                                cells[rows][cols].innerHTML = "";
                            }
                            i++; // This was misplaced
                        }
                }
        }

<html>
<head>
<script></script>
</head>
<body onload="setup()">
<div id="content">    
    <p>You can move any number into an empty spot by moving up, down,
    right, or left. Diagonal moves are not allowed. The object is
    to get all the numbers into correct order, from 1 through 15
    with the empty space at the end.</p>
    <table width="60%" align="center">
    <tr>
        <td height="60"><span id="cell00"></span></td>
        <td><span id="cell01"></span></td>
        <td><span id="cell02"></span></td>
        <td><span id="cell03"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell10"></span></td>
        <td><span id="cell11"></span></td>
        <td><span id="cell12"></span></td>
        <td><span id="cell13"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell20"></span></td>
        <td><span id="cell21"></span></td>
        <td><span id="cell22"></span></td>
        <td><span id="cell23"></span></td>        
        </tr><tr>
        <td height="60"><span id="cell30"></span></td>
        <td><span id="cell31"></span></td>
        <td><span id="cell32"></span></td>
        <td><span id="cell33"></span></td>        
        </tr>   
    </table>
    
</div>
</body>

Got that code working but now the next step isn't working. When the user clicks on a cell of the table (html has onclick="doClick(row, col) added to it), it's supposed to swap cells if the if statement is true. I've desk checked it and even if the statement is true, it's being skipped and triggering the else statement. — Mishelbi, Oct 30 '18 at 15:32
This seems to be another problem than what your original question is about. I would suggest posting a new question about that click issue, where you should of course provide the related code, ...etc. I will be happy to look at it if no-one else does. However, if you consider the original question answered, please mark it as accepted. — trincot, Oct 30 '18 at 15:51

populate a table with arrays but getting undefined

1 Answers1