Uncaught Typeerror: Cannot Set Property 'Onclick' of Null

Uncaught TypeError: Cannot set property 'onclick' of null

The problem seems to be you are executing the script before the element is loaded.

I assume this script is added in the hello.js file which is added before the DOM is created.

The solution here is to execute the script after the DOM is ready like:

window.onload = function(){
    document.getElementById("subm").onclick=function(){
        alert("Hello WOrld");
    }
}

All JavaScript code which deals with DOM elements like the one above has to be executed only after the DOM is loaded.

Demo: Fiddle

TypeError: Cannot Set property 'onclick' of null

ids are case sensitive. So you element is #stop and not #Stop

  var stop = document.getElementById('stop')

Just make sure to do this for all the elements.

Cannot set property 'onclick' of null in my function js

try using DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", function() {
    // code...
    var element = document.getElementById('powierzchnia');
    if (element.className === 'show col-12 gallery-block grid-gallery') {
        element.className = 'hide col-12 gallery-block grid-gallery';
        document.getElementById('powierzchnia_chup').style.display = 'none';
        document.getElementById('powierzchnia_chdown').style.display = 'inline';
    } else {
        element.className = 'show col-12 gallery-block grid-gallery';
        document.getElementById('powierzchnia_chup').style.display = 'inline';
        document.getElementById('powierzchnia_chdown').style.display = 'none';
    }
});

Now the script should run only when the Html content has been loaded :)

ReactJS TypeError: Cannot set property 'onclick' of null

I grab code from @SiddhantVarma answer, and I modified and add what's missing:

import {useState} from "react"

function App() {

 const [hidden, setHidden] = useState(true);
  
  return (
    <>
      <div className="topnav" id="myTopnav">
        <a href="#home" className="active">Forum Anak IT</a>
        <a href="#" id="myBtn" className="button" onClick={()=>{setOpen(true}}>Login</a>
      </div>
 {hidden ? (
        <></>
      ) : (
      <div id="myModal" className="modal">
        <div className="modal-content">
          <span className="close">×</span>
          <p>Some text in the Modal..</p>
        </div>
       <button onClick={() => setHidden(true)}>Close</button>
      </div>
}
    </>
  );
}
}

Uncaught TypeError: Cannot set property 'onclick' of null. Overlapping JavaScript

You can simply test whether menuBtn is defined and populated before you try to use it:

if (menuBtn) menuBtn.onlick //...etc

Or you could put this code in a separate JS file / block which is only loaded if the menu is loaded.

weird Uncaught TypeError: Cannot set property 'onclick' of null

When you declare background in manifest.json, it creates a background page where the specified scripts run. It's a hidden separate page. You can debug it its own separate devtools.

The browser_action or page_action popup is also a separate page. It's not related to the background script/page. It also has its own separate devtools which you can access by right-clicking inside the popup and choosing "Inspect".

You can use both devtools to debug the problem: set breakpoints, reload the page via Ctrl-R or F5 key, step through the code and actually see what happens so there's no need to guess.

Currently you run the same main.js in two pages. So, one instance of main.js runs in the background script's page where DOM is empty and naturally it doesn't find any elements.

The solution is to split it into two scripts. One script will be the background script that registers API stuff. Another script will run in the popup and deal with UI stuff.

1. In manifest.json declare "background": {"scripts": ["bg.js", "persistent":false]}

2. Make bg.js:

   chrome.runtime.onInstalled.addListener(() => {
     chrome.declarativeContent.onPageChanged.removeRules(() => {
       chrome.declarativeContent.onPageChanged.addRules([{
         conditions: [
           new chrome.declarativeContent.PageStateMatcher({
             pageUrl: {hostEquals: 'steamcommunity.com'},
           }),
         ],
         actions: [new chrome.declarativeContent.ShowPageAction()],
       }]);
     });
   });
   

3. Make popup.js:

   document.getElementById('main-switch').onclick = function () {
     var elements = document.getElementsByTagName('span');
     console.log('Elements:', elements);
   };
   

4. Load it in your html: <script src=popup.js></script>

   No need for defer or async attributes. No need for window.load either: the script
   already runs when DOM is ready as it's the last thing in HTML.

Notes:

• To view the console output, use the correct devtools as explained at the beginning of this answer.
• To gray out the icon on non-matching sites, see this answer.

---

Related Topics