title: Stop refreshing page on submit
body: <p>I am doing an email project and trying to copy the data of the user into a localstorage. I've coded everything but when trying to press the button, it keeps refreshing the page. I tried many way to fix it but can't find any.</p>
  <p>I thought using e.preventDefault(); could fix it, but it doesn't.</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>const Envoie = document.getElementsById("Envoie");
  const EmailInfo = document.querySelector('.Storage');
  const prenomInput = Envoie['PremierNom'];
  const nomInput = Envoie['DeuxiemeNom'];
  const emailInput = Envoie['AdresseC'];
  const objetInput = Envoie['Objet'];
  
  const addEmail = (PremierNom, DeuxiemeNom, AdresseC, Objet) =&gt; {
    email.push({
      PremierNom: prenom,
      DeuxiemeNom: nom,
      Objet: objet,
      AdresseC: mail
    })
    return {
      prenom,
      nom,
      objet,
      mail
    };
  };
  
  const createEmailElement = ({
    PremierNom,
    DeuxiemeNom,
    AdresseC,
    Objet
  }) =&gt; {
    const emailDiv = document.createElement('div');
    const emailPrenom = document.createElement('h1');
    const emailnom = document.createElement('h1');
    const emailobjet = document.createElement('h1');
    const emailAdresse = document.createElement('h1');
  
  
    emailPrenom.innerText = "Prenom: " + PremierNom;
    emailnom.innerText = "Nom: " + DeuxiemeNom;
    emailobjet.innerText = "Objet: " + Objet;
    emailAdresse.innerText = "Adresse Courriel: " + AdresseC;
  
    emailDiv.append(emailPrenom, emailnom, emailobjet, emailAdresse);
    EmailInfo.appendChild(emailDiv);
  
  };
  
  email.forEach(createEmailElement);
  
  Envoie.onSubmit = e =&gt; {
    e.preventDefault();
  
    const newEmail = addEmail(
      prenomInput.value,
      nomInput.value,
      objetInput.value,
      emailInput.value
    );
  
    createEmailElement(newEmail)
    prenomInput.value = ""
    nomInput.value = ""
    objetInput.value = ""
    emailInput.value = ""
  
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h2&gt;Bienvenue sur la page d'accueil de CourrielFares &lt;/h2&gt;
  &lt;section&gt;
  
    &lt;form id="Envoie"&gt;
      &lt;div class="envoyer"&gt;
        &lt;label for="PremierNom"&gt; Votre Prenom &lt;/label&gt;
        &lt;input type="text" id="PremierNom" name="PremierNom" &lt;/div&gt;
        &lt;div class="envoyer"&gt;
          &lt;label for="DeuxiemeNom"&gt; Votre Nom &lt;/label&gt;
          &lt;input type="text" id="DeuxiemeNom" name="DeuxiemeNom" &lt;/div&gt;
          &lt;div class="envoyer"&gt;
            &lt;label for="AdresseC"&gt; Votre Adresse Courriel &lt;/label&gt;
            &lt;input type="text" id="AdresseC" name="AdresseC" &lt;/div&gt;
            &lt;div class="envoyer"&gt;
              &lt;label for="Objet"&gt; Objet&lt;/label&gt;
              &lt;input type="text" id="Objet" name="Objet" &lt;/div&gt;
              &lt;div class="envoyer"&gt;
                &lt;label for="MSG"&gt; Message &lt;/label&gt;
                &lt;textarea name="MSG" id="MSG" cols="25" rows="10"&gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;button type="Envoyer"&gt;Envoyer&lt;/button&gt;
    &lt;/form&gt;
  
    &lt;div class="Storage"&gt;&lt;/div&gt;
    
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>