title: Trouble adding buttons to tables
body: <p>I am trying to add several buttons to a table using javascript, however I keep being offered this result with <code>[objectHTMLInputElement]</code> </p>
  
  <p><img src="https://i.stack.imgur.com/Qa3g9.png" alt="enter image description here"></p>
  
  <p>Here is my code:</p>
  
  <pre><code>function createDiseaseTable(country){
      var displayCountry = document.getElementById("countrySelected");
      displayCountry.innerHTML = country.name;
      var diseaseTable = document.getElementById("diseases");
      diseaseTable.innerHTML = "";
      for (var i = 0; i&lt;country.diseases.length; i++) ////////////////////////////////////
      {
          var changeDisease = document.createElement('input');
          changeDisease.type = 'button';
          changeDisease.name = "x"
          changeDisease.onclick = hi();
          var row = diseaseTable.insertRow(i);
          var cell1 = row.insertCell(0)
          var cell2 = row.insertCell(1)
          var cell3 = row.insertCell(2)
          var cell4 = row.insertCell(3)
          var cell5 = row.insertCell(4);
          cell1.innerHTML = OurDiseases[i].name;
          cell2.innerHTML = OurDiseases[i].cureLevel;
          cell3.innerHTML = OurDiseases[i].killLevel;
          cell4.innerHTML = OurDiseases[i].cured;
          cell5.innerHTML = changeDisease;
          console.log(changeDisease);
      }
      var row = diseaseTable.insertRow();
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
      cell1.innerHTML = "Disease";
      cell2.innerHTML = "Level needed to cure";
      cell3.innerHTML = "Deaths each year";   
      cell4.innerHTML = "Cured";
      cell5.innerHTML = "More Info";
  
  }
  </code></pre>
  
  <p>Note: I'm not concerned about not running a function yet upon click, i just want the actual button to appear</p>