title: Why does my code change the innertext back to the starting value?
body: <p>This is quite a simple problem that is somehow eluding me, and my google fu is also letting me down. What I expect to happen is that the  changes value and stays there. But for some reason after the function is called it returns back up to the
  <code>let button = document.querySelector('#btn').addEventListener(&quot;click&quot;, ChangeText);</code>
  line. And it just overwrites what I just did.</p>
  <p>I am fully aware that I could use onclick on the button but we're meant to use eventlisteners for this.</p>
  <p>Here is the html and js. and a jsfiddle.</p>
  <p><a href="https://jsfiddle.net/bgd2n381/" rel="nofollow noreferrer">https://jsfiddle.net/bgd2n381/</a></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>let button = document.querySelector('#btn').addEventListener("click", ChangeText);
  
  
  function ChangeText() {
    let label = document.querySelector('#text');
    if (label.innerText == "Start Text") {
      label.innerText = "Text has been changed";
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Document&lt;/title&gt;
    &lt;script src="js/uppgift2.js" defer&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;form&gt;
      &lt;label id="text"&gt;Start Text&lt;/label&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;button id="btn"&gt;Button&lt;/button&gt;
    &lt;/form&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>