title: Adding a row to a table using information the user submitted (HTML/JS)
body: <p>On my first HTML page, I ask the user to submit some information:</p>
  <pre><code>    &lt;form&gt;
      &lt;label for=&quot;task&quot;&gt;New Task&lt;/label&gt;
      &lt;input type=&quot;text&quot; id=&quot;task&quot; placeholder=&quot;Enter here&quot;&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;label for=&quot;deadline&quot;&gt;Deadline&lt;/label&gt;
      &lt;input type=&quot;date&quot; id=&quot;deadline&quot; name=&quot;deadline&quot;&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;label for=&quot;duration&quot;&gt;Duration&lt;/label&gt;
      &lt;input type=&quot;text&quot; id=&quot;duration&quot; name=&quot;duration&quot; placeholder=&quot;__ hours&quot;&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;label for=&quot;priority&quot;&gt;Priority&lt;/label&gt;
      &lt;input type=&quot;radio&quot; id=&quot;A&quot; name=&quot;priority&quot; value=&quot;A&quot;&gt;
      &lt;label for=&quot;A&quot;&gt;A&lt;/label&gt;
      &lt;input type=&quot;radio&quot; id=&quot;B&quot; name=&quot;priority&quot; value=&quot;B&quot;&gt;
      &lt;label for=&quot;B&quot;&gt;B&lt;/label&gt;
      &lt;input type=&quot;radio&quot; id=&quot;C&quot; name=&quot;priority&quot; value=&quot;C&quot;&gt;
      &lt;label for=&quot;C&quot;&gt;C&lt;/label&gt; 
      &lt;br&gt;
      &lt;br&gt;
      &lt;input type=&quot;submit&quot; id =&quot;submit&quot; value=&quot;Submit&quot; onclick=&quot;addRow()&quot;&gt;
      &lt;/form&gt;
  </code></pre>
  <p>On my second HTML page, I display some of that information in a table.</p>
  <pre><code>    &lt;table id=&quot;todayTasks&quot;&gt;
      &lt;tr&gt;
      &lt;th&gt;Status&lt;/th&gt;
      &lt;th&gt;Task&lt;/th&gt;
      &lt;th&gt;Hours Needed&lt;/th&gt;
      &lt;th&gt;Priority&lt;/th&gt;
      &lt;th&gt;Actions&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  <p>Here is the JavaScript:</p>
  <pre><code>    function addRow(){
          var table = document.getElementById(&quot;todayTasks&quot;);
          var row = document.createElement('tr');
          var td1 = document.createElement('td');
          var td2 = document.createElement('td');
          var td3 = document.createElement('td');
          td1.innerHTML = document.getElementById('task').value;
          td2.innerHTML = document.getElementById('duration').value;
          td3.innerHTML = document.getElementById('priority').value;
          row.appendChild(td1);
          row.appendChild(td2);
          row.appendChild(td3);
          table.children[0].appendChild(row);
      }
  </code></pre>
  <p>I'm really new to HTML and JavaScript, and I'm not really sure what I'm doing. When I try submitting the form, the table isn't updated. Any tips?</p>