1

I'm trying to create a word search puzzle and am beginning by generating a table of random letters. I want to have a table of any number by number, so 10X10 for example, but so far I'm only able to generate a column and can't figure out how to create more columns or the entire grid.

var firstCol = [];

for (var i = 0; i <= 10; i++){
    var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
    var random = parseInt(Math.random()*characters.length);
    var letter = characters.charAt(random); //returning random letter
    var innerArrays = ['<td>' + letter + '</td>'];
    firstCol.push(innerArrays);
};


for (var i = 0; i <= 10; i++){
    document.getElementById('wsBox').innerHTML += 
    '<tr>'+ firstCol[i] + '</tr>';
};

and this is my HTML...

<table>
    <tbody id="wsBox">
    </tbody>
</table>
2
  • 1
    @PauAI: Could had written it as answer instead of comment.
    – user2705585
    Dec 13, 2015 at 9:58
  • @noob Rewritten it as answer
    – PauAI
    Dec 13, 2015 at 10:02

3 Answers 3

2

This is a very basic code.

var cols = 10; 
var rows = 10; 
var html = ""; 

for(var i =0; i <= rows; i++) { 
    html += '<tr>'; 
    for(var h=0; h<= cols; h++) { 
       var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'; 
       var random = parseInt(Math.random()*characters.length);
       var letter = characters.charAt(random); //returning random letter
       html += '<td>' + letter + '</td>'; 
    } 
    html += '</tr>'; 
}

document.getElementById('wsBox').innerHTML += html;
4
  • +1 for answering first. According to me this algorithm should have more entropy. In some cases characters are repeated consecutively.
    – user2705585
    Dec 13, 2015 at 10:26
  • There's no need to redefine characters with each loop iteration.
    – Andy
    Dec 13, 2015 at 10:33
  • We don't know what's source of rows for the word puzzles, so it's probably in the correct place as it would have different data in each iteration. Dec 13, 2015 at 10:45
  • @PaulAl Wow...my code was so mixed up. Your code is simple and sensible. Thanks so much! Dec 13, 2015 at 10:49
-1

Here's working code:

http://jsfiddle.net/42dj7jy8/3/

Script

var rows = [];
var colStr = null;
for(var j = 0; j <= 10; j++) {
    colStr = "";
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';
  for (var i = 0; i <= 10; i++){
      var random = parseInt(Math.random()*characters.length);
      var letter = characters.charAt(random); //returning random letter
      var cell = '<td>' + letter + '</td>';
      colStr += cell;
  };
  rows.push('<tr>' + colStr + '</tr>');
}


document.getElementById('wsBox').innerHTML += rows.join("");

Some CSS to wash it down with

td {
  border: 1px solid black;
  padding: 4px;
  text-align: center;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Here's output

enter image description here

3
  • The OP wants to be able to vary the dimensions of the grid. Your code doesn't account for that.
    – Andy
    Dec 13, 2015 at 10:30
  • Her question says she doesn't code much, I just put her code with changes there to avoid her confusion. Dec 13, 2015 at 10:33
  • Her question doesn't say that she doesn't code much.
    – Andy
    Dec 13, 2015 at 10:34
-2

This uses arrays to build the cells and rows of the grid which are joined together with the join method. Simply pass the dimensions of the grid into the function. One loop only.

function createGrid(x, y) {
  var rows = [], cells = [];
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVXYZ';

  // a complete grid is x * y dimensions
  for (var i = 0, l = x * y; i < l; i++) {
    letter = characters.charAt(Math.random() * characters.length);
    cells.push('<td>' + letter + '</td>');

    // when we reach the last column of the row
    // push the cells into the row array and reset
    // the cells array
    if (i !== 0 && (i + 1) % x === 0) {
      rows.push('<tr>' + cells.join('') + '</tr>');
      cells = [];
    }
  }
  return rows.join('');
}

Grab the element and use insertAdjacentHTML to add the compiled grid HTML.

var tbody = document.getElementById('wsBox');
tbody.insertAdjacentHTML('beforeend', createGrid(10, 10));

DEMO - 10 x 10 grid

DEMO - 3 x 4 grid

8
  • Give the reason for the downvote, please, because this code works and is exactly to spec.
    – Andy
    Dec 13, 2015 at 10:30
  • If you're aiming for efficiency using x*y look at the @PauAl's answer, that's the most efficient and understandable one. Dec 13, 2015 at 10:35
  • How is using 2 loops more efficient than using 1? If you don't understand my code, that's fine, but don't downvote a perfectly useful and accurate answer for that reason.
    – Andy
    Dec 13, 2015 at 10:36
  • Are seriously counting loops for asymptotic algorithmic complexity ? your code has same time complexity as his, I meant in terms of size of code and ease of understanding. Dec 13, 2015 at 10:38
  • My code has the same number of lines as Paul's code, and I've added comments to explain what's going on. I'm sorry you don't understand it.
    – Andy
    Dec 13, 2015 at 10:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.