title: Adding Form Input Values to InnerHTML Output
body: <p>I am trying to code a form that creates a custom sentence based on the inputs a user selects. For example, my form has one written inputs and two dropdowns. I want this data added to my innerHTML. Say I wanted to create a custom sentence about a dog the layout would look like this:</p>
  
  <blockquote>
    <p>My dog's name is (value from input 1). (Value from dropdown 1) loves
    to play fetch. My dog is (value from dropdown 2).</p>
  </blockquote>
  
  <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>function sentence() {
    document.getElementById("s1").innerHTML = "My dog's name is (value from input 1). (Value from dropdown 1) loves to play fetch. My dog is (value from dropdown 2).";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table,
  td,
  th {
    margin-left: auto;
    margin-right: auto
  }
  
  .display {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  p {
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td&gt; &lt;input type="text" placeholder="Your Dog's Name" name="name" maxlength="100"&gt;&lt;/td&gt;
      &lt;td&gt;
        &lt;select name="gender"&gt;
          &lt;option value="He"&gt;He&lt;/option&gt;
          &lt;option value="She"&gt;She&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
      &lt;td&gt;
        &lt;select name="size"&gt;
          &lt;option value="Big"&gt;Big&lt;/option&gt;
          &lt;option value="Medium"&gt;Medium&lt;/option&gt;
          &lt;option value="Small"&gt;Small&lt;/option&gt;
        &lt;/select&gt;
      &lt;/td&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;hr&gt;
  &lt;br&gt;
  &lt;p id="s1"&gt;
  
  &lt;/p&gt;
  &lt;br&gt;
  
  &lt;div class="display"&gt;
    &lt;button onclick="sentence()"&gt; Button &lt;/button&gt;
  &lt;/div&gt;
  
  &lt;p id="s1"&gt;
  
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>