title: How to fix "Uncaught TypeError: Cannot set property 'onchange' of null"?
body: <p>Trying to upload my extension locally on my computer and am obtaining this error "Uncaught TypeError: Cannot set property 'onchange' of null". This is most likely because the window has loaded and the chrome extension is running the script in the background (which it really shouldn't be -- only when the popup is actually loaded [when it is clicked])</p>
  
  <p>Have tried looking up where others have successfully overcome this scenario, though most are in other areas or working with JQuery and not a solution for Javascript.</p>
  
  <p>Here is the code:</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>    window.onload = function() {
      
       var pVal = "";
        
        function func(item) { 
        if (item == 1) {
         pVal = "A";
        } else if (item == 2) {
         pVal = "B";
        } else if (item == 3) {
         pVal = "C";
        } else if (item == 4) {
         pVal = "D";
        } else if (item == 5) {
         pVal = "E";
        } else if (item == 6) {
         pVal = "F";
        } else if (item == 7) {
         pVal = "G";
        } else if (item == 8) {
         pVal = "H";
        } else if (item == 9) {
         pVal = "I";
        } else if (item == 10) {
         pVal = "J";
        } 
       }
        
       document.getElementById("test1").onchange = function() { 
        func(document.getElementById("test1").value);
       }
        
        document.getElementById('buttonId').onclick = function() {
        document.getElementById('TestId').innerHTML = pVal;
       }
      
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;!DOCTYPE html&gt;
      &lt;html&gt;
       &lt;body&gt; 
          &lt;select id="test1" class="form-element" name="test1" tabindex="8" required&gt;
            &lt;option value="" selected disabled hidden&gt;Select something&lt;/option&gt;
            &lt;option value="1"&gt;1&lt;/option&gt;
            &lt;option value="2"&gt;2&lt;/option&gt;
            &lt;option value="3"&gt;3&lt;/option&gt;
            &lt;option value="4"&gt;4&lt;/option&gt;
            &lt;option value="5"&gt;5&lt;/option&gt;
            &lt;option value="6"&gt;6&lt;/option&gt;
            &lt;option value="7"&gt;7&lt;/option&gt;
            &lt;option value="8"&gt;8&lt;/option&gt;
            &lt;option value="9"&gt;9&lt;/option&gt;
            &lt;option value="10"&gt;10&lt;/option&gt;
          &lt;/select&gt;
      
          &lt;br&gt;
          &lt;button id="buttonId" class="buttonClass"&gt;Does it&lt;/button&gt;
      
        &lt;h3 id="TestId" class="sClass"&gt;&lt;/h3&gt;
      
       &lt;/body&gt;
       &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Appreciate all of your help!</p>