title: Convert value from text field to paragraph
body: <p>I'm trying to fill forms and generate an email from that, but on big scale. HTML code is bellow and located on <a href="https://jsfiddle.net/csq7kwmb/4/" rel="nofollow noreferrer">https://jsfiddle.net/csq7kwmb/4/</a>:</p>
  
  <pre><code>&lt;form class="form"&gt;
      &lt;label&gt;Merchant name &lt;input type="text" class="mName" value=""&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;Merchant ID number &lt;input type="text" class="mId" value=""&gt;&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;Merchant email &lt;input type="text" class="mEmail" value=""&gt;&lt;/label&gt;&lt;br&gt;
      &lt;button onclick="generateEmail()"&gt;
        Generate
      &lt;/button&gt;
  &lt;/form&gt;
  &lt;p class="paragraph"&gt;
      Merchant name is &lt;span class="merchantN"&gt;&lt;/span&gt;, merchant ID is &lt;span class="merchantID"&gt;&lt;/span&gt; and his email is &lt;span class="merchantE"&gt;&lt;/span&gt;.
  &lt;/p&gt;
  </code></pre>
  
  <pre><code>function generateEmail() {
    //generated email variable
    var email = document.querySelector('.paragraph');
  
    //input
    var merchantName = document.querySelector('.mName');
    var merchantId = document.querySelector('.mId');
    var merchantEmail = document.querySelector('.mEmail');
  
    //output
    var paragraphName = document.querySelector('.merchantN');
    var paragraphId = document.querySelector('.merchantID');
    var paragraphEmail = document.querySelector('.merchantE');
    //var paragraph = document.getElementById('field2');
  
    //properly filled email
    paragraphName.textContent = merchantName.value;
    paragraphId.textContent = merchantId.value;
    paragraphEmail.textContent = merchantEmail.value;
  
    //displaying email, giding text fields
    merchantName.style.display = none;
    merchantId.style.display = none;
    merchantEmail.style.display = none;
    email.style.display = block;
  }
  </code></pre>
  
  <p>The page, when i do that locally, only refreshes.</p>