0

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])

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.

Here is the 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;
     }
    
    }
        <!DOCTYPE html>
    <html>
     <body> 
        <select id="test1" class="form-element" name="test1" tabindex="8" required>
          <option value="" selected disabled hidden>Select something</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
        </select>
    
        <br>
        <button id="buttonId" class="buttonClass">Does it</button>
    
      <h3 id="TestId" class="sClass"></h3>
    
     </body>
     <script src="popup.js"></script>
    </html>

Appreciate all of your help!

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
Andrew Ryan
  • 1,489
  • 3
  • 15
  • 21
  • This post looks relevant to your problem. See if adding the run_at attribute to your manifest does the trick for you. https://stackoverflow.com/questions/5113318/in-a-chrome-extension-content-script-must-i-wait-for-document-ready-before-proc – Tanner Jun 18 '19 at 15:27
  • There is no need for Fiddles. Just place your code into a code snippet as I've done with my edit for you. Also, it appears that your code is working properly when not an extension. – Scott Marcus Jun 18 '19 at 15:29
  • @Tanner Tried using run_at: document_end, no luck - still resulting in an error. Thanks for your help though. – Andrew Ryan Jun 18 '19 at 16:23
  • @ScottMarcus Thanks for that - sorry was working on it in Fiddle for that isolated issue and thought it would be helpful to have in case. – Andrew Ryan Jun 18 '19 at 16:26
  • It was stated in [this SO post](https://stackoverflow.com/questions/23544718/uncaught-typeerror-cannot-set-property-onchange-of-null?rq=1) that a possibility of that error could be because "the script must be running before the elements in the DOM. You have to include the javascript after the elements in the DOM, or wrap it in a DOM ready handler" – MαπμQμαπkγVπ.0 Jun 19 '19 at 09:11
  • @MαπμQμαπkγVπ.0 Thank you very much for your reply. Don't I already have it wrapped in a DOM ready handler I believe with window.onload() ? – Andrew Ryan Jun 20 '19 at 13:43

1 Answers1

0

Try to use async defer in HTML file where you linked javascript.

<head>
    <script async defer src="popup.js"></script>
</head>
vrushal
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 02 '22 at 01:25