title: I can't get JavaScript to print user form data to the html document
body: <p>Hey guys so I can't get JavaScript to print user form data to the html document. I have the html page set up with id's and the JavaScript should technically be printing to the document. Can anyone help me troubleshoot??? We've been learning JavaScript in classes however the online lectures suck and don't give me a hands on feel.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;JS Project - Your Full Name&lt;/title&gt;
      &lt;style src="css/styles.css"&gt;&lt;/style&gt;
  &lt;/head&gt;
  
  
  
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="excel.html"&gt;Excel&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  
  
  
  
  
  
      &lt;main&gt;
          &lt;form id="mainForm" name="mainform"&gt;
              &lt;fieldset&gt;
                  &lt;legend&gt;Personal Information &lt;/legend&gt;
  
                  &lt;div&gt;
                      First Name:
                      &lt;input type="text" id="first-name" maxlength="50" name="firstName" placeholder="First Name"&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      Last Name:
                      &lt;input type="text" id="last-name" maxlength="50" name="lastName" placeholder="Last Name"&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      Email:
                      &lt;input type="email" id="email" maxlength="50" name="email" placeholder="info@example.com"&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      Address:
                      &lt;input type="text" id="address" maxlength="50" name="address" placeholder="Address"&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      City:
                      &lt;input type="text" id="city" maxlength="50" name="city" placeholder="City"&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      Province:
                      &lt;input type="text" id="province" maxlength="50" name="province" placeholder="Province"&gt;
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      Membership Options:
                      &lt;br&gt;
                      &lt;input type="radio" name="membership" checked value="p"&gt;Premium Membership
                      &lt;br&gt;
                      &lt;input type="radio" name="membership" value="s"&gt;Standard Membership
                      &lt;br&gt;
                      &lt;input type="radio" name="membership" value="b"&gt;Basic Membership
                  &lt;/div&gt;
  
                  &lt;div&gt;
                      &lt;!--&lt;input type="button" value="Submit" onclick="userInfo();"&gt;--&gt;
                      &lt;button type="submit" onclick="userInfo()"&gt;Submit&lt;/button&gt;
  
                      &lt;input type="reset" value="Clear"&gt;
                  &lt;/div&gt;
          &lt;/form&gt;
  
          &lt;span&gt;
  
          &lt;/span&gt;
      &lt;/main&gt;
  
  
      &lt;footer&gt;
          &lt;p&gt;Canadian Business College - JavaScript Final Project - Your Full Name&lt;/p&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;script src="js/script.js"&gt;&lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>IN SEPERATE JS DOCUMENT LINKED TO THE HTML:</p>
  
  <pre><code>function userInfo() {
  
    var myForm = document.mainform
    var firstName = myForm.firstName.value;
  
  
    if (firstName == null || firstName == "") {
    alert("Please enter your first name!");
  
    } 
  
      else {
        document.getElementByID("firstName").innerHTML = firstName;
        document.getElementByID("lastName").innerHTML = lastName;
        document.getElementByID("email").innerHTML = email;
        document.getElementByID("address").innerHTML = address;
        document.getElementByID("city").innerHTML = city;
        document.getElementByID("province").innerHTML = province;
      }
  
      else if (myForm.membership.value == "p") {
        document.getElementByID('firstName').innerHTML = "Full Name: " + firstName; + lastName;
        document.getElementByID('email').innerHTML = "Email: " + email;
        document.getElementByID('address').innerHTML = "Address: " + address; + city; + province;
        document.getElementByID('membership').innerHTML = "Membership: " + p;
      }
  
      else if (myForm.membership.value == "s") {
        document.getElementByID('firstName').innerHTML = "Full Name: " + firstName; + lastName;
        document.getElementByID('email').innerHTML = "Email: " + email;
        document.getElementByID('address').innerHTML = "Address: " + address; + city; + province;
        document.getElementByID('membership').innerHTML = "Membership: " + s;
      }
  
      else if (myForm.membership.value == "b") {
        document.getElementByID('firstName').innerHTML = "Full Name: " + firstName; + lastName;
        document.getElementByID('email').innerHTML = "Email: " + email;
        document.getElementByID('address').innerHTML = "Address: " + address; + city; + province;
        document.getElementByID('membership').innerHTML = "Membership: " + b;
      }
  
      onsubmit return 
  }
  </code></pre>