title: output 2d array into html file
body: <p>I have a project to do for school where you make a memory game. The grid is a 6x6 and is arranged in a table. What I'm trying to do is when the user clicks the "print" button, the table fills up with the numbers in the 2d array. I have created the array with numbers in them, but I can't get them to output to the table in the HTML file.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;head&gt;
      &lt;link href = "matchinggame.css" rel = "stylesheet"/&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td id="cell00" &gt;&lt;/td&gt;
              &lt;td id="cell01" &gt;&lt;/td&gt;
              &lt;td id="cell02" &gt;&lt;/td&gt;
              &lt;td id="cell03" &gt;&lt;/td&gt;
              &lt;td id="cell04" &gt;&lt;/td&gt;
              &lt;td id="cell05" &gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td id="cell10" &gt;&lt;/td&gt;
              &lt;td id="cell11" &gt;&lt;/td&gt;
              &lt;td id="cell12" &gt;&lt;/td&gt;
              &lt;td id="cell13" &gt;&lt;/td&gt;
              &lt;td id="cell14" &gt;&lt;/td&gt;
              &lt;td id="cell15" &gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td id="cell20" &gt;&lt;/td&gt;
              &lt;td id="cell21" &gt;&lt;/td&gt;
              &lt;td id="cell22" &gt;&lt;/td&gt;
              &lt;td id="cell23" &gt;&lt;/td&gt;
              &lt;td id="cell24" &gt;&lt;/td&gt;
              &lt;td id="cell25" &gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td id="cell30" &gt;&lt;/td&gt;
              &lt;td id="cell31" &gt;&lt;/td&gt;
              &lt;td id="cell32" &gt;&lt;/td&gt;
              &lt;td id="cell33" &gt;&lt;/td&gt;
              &lt;td id="cell34" &gt;&lt;/td&gt;
              &lt;td id="cell35" &gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td id="cell40" &gt;&lt;/td&gt;
              &lt;td id="cell41" &gt;&lt;/td&gt;
              &lt;td id="cell42" &gt;&lt;/td&gt;
              &lt;td id="cell43" &gt;&lt;/td&gt;
              &lt;td id="cell44" &gt;&lt;/td&gt;
              &lt;td id="cell45" &gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td id="cell50" &gt;&lt;/td&gt;
              &lt;td id="cell51" &gt;&lt;/td&gt;
              &lt;td id="cell52" &gt;&lt;/td&gt;
              &lt;td id="cell53" &gt;&lt;/td&gt;
              &lt;td id="cell54" &gt;&lt;/td&gt;
              &lt;td id="cell55" &gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;div&gt;
          &lt;input type="button" value="print" id = "button1" onclick="drawBoard();"&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>root {
      display: block;
  }
  
  body {
      text-align:center;
  }
  
  p {
      font-family:monospace;
  }
  
  table {
      margin:auto;
  }
  
  td {
      width:50px;
      height:50px;
      border: 1px solid black;
      font-size:40px;
      text-align:center;
      font-family:arial, helvetica, sans-serif;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var board = [["1", "1", "2", "2", "3", "3"],
          ["4", "4", "5", "5", "6", "6"],
          ["7", "7", "8", "8", "9", "9"],
          ["10", "10", "11", "11", "12", "12"],
          ["13", "13", "14", "14", "15", "15"],
          ["16", "16", "17", "17", "18", "18"]];
  
  
  
      function drawBoard() {
          for (int row = 0; row &lt; board.length; i++) {
              for (int col = 0; col &lt; board[row].length; j++) {
                  var cell = document.getElementById("cell" + row + col);
                  cell.innerHTML = board[row][col];
          }
  
      }
  }
  </code></pre>