title: Why is my button that calls a function on click making my page reload
body: <p>I am working on a form that uses javascript to create a paragraph. For some reason, when I click my button, it forces my page to reload. Could you anyone let me know what I'm doing wrong here?</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>console.log('everything is linked')
  function createParagraph() {
      console.log('function called');
      var wordOne=document.getElementById('textOne').value
      var wordTwo=document.getElementById('testTwo').value
  
      var paragraph = '&lt;p&gt;My first word is' + wordOne+'. My Second word is '+ wordTwo+'.&lt;/p&gt;';
  
      document.getElementById('answer').innerHTML= paragraph
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;form action=""&gt;
          &lt;input id='textOne' type="text"&gt;
          &lt;input id='textTwo' type="text"&gt;
          &lt;button onclick="createParagraph()"&gt;Click Me&lt;/button&gt;
      &lt;/form&gt;
      
      &lt;div id="answer"&gt;&lt;/div&gt;
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>