title: Input text via Javascript ECMAscript problem
body: <p>I'm learning Javascript and I'm trying to input a text in a field, click on a button and change a paragraph innerHTML. </p>
  
  <p>I've already done that successfully. But now I want to make a correction on the field, but when I click the button, nothing happens.</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>//These are the variables
  var name = document.getElementById("name").value;
  var bt = document.getElementById("bt");
  var para = document.querySelector("p#paragraph");
  
  //event calls the insert().
  bt.addEventListener("click", insert);
  
  //The function changes the innerHTML
  function insert() {
    para.innerHTML = name;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>//The textfield to input the name
  &lt;input type="text" id="name" placeholder="Your name here"&gt; &lt;br&gt; //The button
  &lt;input type="button" value="Click" id="bt"&gt; //The Paragraph to be changed
  &lt;p id="paragraph"&gt;...&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>