title: Uncaught TypeError: Cannot read property 'addEventListener' of null :: My Javascript not working with HTML
body: <p>I am trying to reproduce this JSfiddle, <a href="https://jsfiddle.net/pvwtrbfd/" rel="nofollow noreferrer">https://jsfiddle.net/pvwtrbfd/</a></p>
  <p>In chrome browser, on MacOS the same JS fiddle does not work.</p>
  <p>I would really appreciate any help on this.</p>
  <p>Thanks in advance.</p>
  <h1 id="below-is-the-content-of-filename.html-file-i-am-using">Below is the content of Filename.html file I am using:</h1>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
  
    &lt;h1&gt;My First JavaScript&lt;/h1&gt;
    &lt;p&gt;Here, a JavaScript &lt;/p&gt;
    &lt;script type=&quot;text/JavaScript&quot;&gt;
      function getSel() // javascript
      {
        console.log(&quot;test&quot;);
  
        // obtain the object reference for the textarea&gt;
        var txtarea = document.getElementById(&quot;mytextarea&quot;);
        // obtain the index of the first selected character
        var start = txtarea.selectionStart;
        // obtain the index of the last selected character
        var finish = txtarea.selectionEnd;
        //obtain all Text
        var allText = txtarea.value;
  
        // obtain the selected text
        var sel = allText.substring(start, finish);
        //append te text;
        var newText = allText.substring(0, start) + &quot;&lt;center&gt;&quot; + sel + &quot;&lt;/center&gt;&quot; + allText.substring(finish, allText.length);
  
        txtarea.value = newText;
        console.log(newText);
        // do something with the selected content
      }
        document.getElementById(&quot;btnCenter&quot;).addEventListener(&quot;click&quot;, getSel);
  
    &lt;/script&gt;
  
    &lt;div&gt;
      &lt;button id=&quot;btnCenter&quot;&gt;
        center
      &lt;/button&gt;
      &lt;br /&gt;
      &lt;textArea id=&quot;mytextarea&quot;&gt;&lt;/textArea&gt;
  
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>