title: Change an HTML <p> tag value with JavaScript
body: <p>I have an HTML form that allows a user to type in the name of a faction and submit it with a button:</p>
  <pre><code>&lt;form method=&quot;get&quot;&gt;
      &lt;/br&gt;&lt;button type=&quot;submit&quot; onclick=&quot;createFaction()&quot;&gt;create faction&lt;/button&gt;
      &lt;input placeholder=&quot;name&quot; id=&quot;factionName&quot; name=&quot;factionName&quot;&gt;&lt;/input&gt;
  &lt;/form&gt;
  </code></pre>
  <p>The reason it is <a href="https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol#Request_methods" rel="nofollow noreferrer">GET</a> at the moment is purely for testing.</p>
  <p>I then have a JavaScript function that changes the name of this:</p>
  <pre><code>&lt;p id=&quot;test1&quot;&gt;&lt;/p&gt;
  </code></pre>
  <p>to whatever the users input was. The JavaScript code is</p>
  <pre><code>function createFaction() {
      var name = document.getElementById('factionName'),
      factionName = input.value;
  
      document.getElementById('test1').innerHTML = name;
  }
  </code></pre>
  <p>However, it doesn't work. Why?</p>