Uncaught TypeError: Cannot set properties of null (setting 'onclick') error-CodePudding

This code is more likely referenced to the yt i watched since im still a newbie in web developing(front-end). I am building a sidebar but my js returns the message from the title I mentioned "Uncaught TypeError: Cannot set properties of null (setting 'onclick')".

const sidenavbtn_menu = document.querySelector('sidenavbtn_menu');
const sidebar = document.querySelector('sidebar');
sidenavbtn_menu.onclick = function() {
    sidebar.classList.toggle('open')
}

<!doctype html>
<html lang="en">
  <head>
    <title>wRBMS</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!---CSS Link-->
    <link rel="stylesheet" href="home_dashboard.css" type="text/css">
    <!---MATERIAL CDN Google-->
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    
  </head>

  <body>
    <div >
        <div  id="">
            <div >
                <div >
                <img href="#">
                <div >w<span>RBMS</span></div>
                </div>
                <span  id="sidenavbtn_menu">menu</span>
            </div>
           
            <ul >
                <li>
                    <a href="#">
                        <i >home</i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i >monitoring</i>
                        <span>MFO</span>
                    </a>
                </li>
               
            </ul>
            
        </div>
    </div>    
    [enter image description here][1]
  </body>
</html>

CodePudding user response：

The issue lies in the following lines:

const sidenavbtn_menu = document.querySelector('sidenavbtn_menu');
const sidebar = document.querySelector('sidebar');

document.querySelector() needs a css-like selector-string. If you want the Selector to match the ID-Field, you need to add # at the beginning. document.querySelector('#sidenavbtn_menu')

If you want to match the class field document.querySelector('.CLASS_VALUE')

More Information are found here: CSS-Selectors

But i would suggest to use the method document.getElementById('sidenavbtn_menu') as it is more optimized for this scenario.

CodePudding user response：

You need to specify if it is a class or id using . for class and # for id.

const sidenavbtn_menu = document.querySelector('#sidenavbtn_menu');
const sidebar = document.querySelector('.sidebar');
sidenavbtn_menu.onclick = function() {
    sidebar.classList.toggle('open')
}

<!doctype html>
<html lang="en">
  <head>
    <title>wRBMS</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!---CSS Link-->
    <link rel="stylesheet" href="home_dashboard.css" type="text/css">
    <!---MATERIAL CDN Google-->
    <link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet">
    
  </head>

  <body>
    <div >
        <div  id="">
            <div >
                <div >
                <img href="#">
                <div >w<span>RBMS</span></div>
                </div>
                <span  id="sidenavbtn_menu">menu</span>
            </div>
           
            <ul >
                <li>
                    <a href="#">
                        <i >home</i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i >monitoring</i>
                        <span>MFO</span>
                    </a>
                </li>
               
            </ul>
            
        </div>
    </div>    
    [enter image description here][1]
  </body>
</html>

CodePudding user response：

If you want to use document.querySelector you have to specify if it's an id, class or else. Ex : document.querySelector('#sidenavbtn_menu');, you could also use document.getElementById('sidenavbtn_menu');

document.querySelector('.sidebar'); will return the first element of the array of elements having .sidebar. If you want to select all elements with a class you could do document.querySelectorAll(".someClass").forEach((e) => {e.doSomething();});