title: How do i make an table with javascript and add table cells to it?
body: <p>I want to make the function be able to write all of the information in the array to <code>felt</code>, on the click of <code>button</code>. What am i doing wrong, how i can make this work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var search = document.getElementById("search");
  var felt = document.getElementById("felt");
  var button = document.getElementById("button");
  
  var personer = [{
    name: "Ole",
    age: 22,
    intrests: ["Swim", "Game"]
  }, {
    name: "Jakob",
    age: 30,
    intrests: ["Dance", "Game", "Eat"]
  }];
  
  function ppl(x, f) {
    f.innerHTML = ``;
    for (var i = 0; i &lt; x.length; i++) {
      f.innerHTML += `&lt;table border="1px"&gt;&lt;tr id="t${(3*i)+1}"&gt;&lt;td&gt;Name&lt;/td&gt;&lt;/tr&gt;&lt;tr id="t${(3*i)+2}"&gt;&lt;td&gt;Age&lt;/td&gt;&lt;/tr&gt;&lt;tr id="t${(3*i)+3}"&gt;&lt;td&gt;Intrests&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;`;
      var table = document.getElementById(`t${(3*i)+1}`);
      var table2 = document.getElementById(`t${(3*i)+2}`);
      var table3 = document.getElementById(`t${(3*i)+3}`);
      var storeFor = i;
      for (var y = 0; y &lt; x[i].name.lenght; y++) {
        table += `&lt;th&gt;${x[storeFor].name[y]}&lt;/th&gt;`;
      }
      for (var j = 0; j &lt; x[i].age.lenght; j++) {
        table2 += `&lt;td&gt;${x[storeFor].age[j]}&lt;/td&gt;`;
      }
      for (var o = 0; o &lt; x[i].intrests.lenght; o++) {
        table3 += `&lt;td&gt;${x[storeFor].intrests[o]}&lt;/td&gt;`;
      }
      f.innerHTML += `&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;`;
    }
  }
  
  button.onclick = function() {
    var sValue = search.value;
    if (20 &lt;= sValue &amp;&amp; sValue &lt;= 25) {
      ppl(personer, felt);
    } else {
      felt.innerHTML = ``;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input type="text" id="search"&gt;
    &lt;input type="button" id="button" value="Search"&gt;
  &lt;/form&gt;
  &lt;div id="felt"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>