title: manipulating DOM elements inside or outside the eventListener
body: <p>I am trying to add an <code>click</code>event when I click on the button, and the page will show what I have typed into the input field:</p>
  
  <pre><code>var input = document.querySelector("input").value;
  document.querySelector(".myButton").addEventListener("click",function()
  {
  var container = document.querySelector(".contanier");
     container.innerHTML = input;
  });
  </code></pre>
  
  <p>this is just work fine, but i want make this code looks strunctre a bit, so i rewite as :</p>
  
  <pre><code>var input = document.querySelector("input").value;
  var button = document.querySelector(".myButton"); 
  var container = document.querySelector(".contanier");
  button.addEventListener("click",function(){container.innerHTML = input;});
  </code></pre>
  
  <p>but when I click the button the page just refresh to be blanked, do i have to make DOM inside the <code>event</code>so this can work? Could anyone tell me what's the difference after I rewrite this?</p>
  
  <p>sorry i fogort the html code: </p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="main-container"&gt;
     &lt;input type="text" class="js-userInput"&gt;
     &lt;button class="myButton"&gt;Go!&lt;/button&gt;
  &lt;/div&gt;
  
  
   &lt;div class="container"&gt;&lt;/div&gt;    
  &lt;/body&gt;
  </code></pre>