开发者问题收集

未捕获的类型错误：无法设置 null 属性（设置‘onclick’）错误

2022-08-05
3507
javascript html css web-development-server

此代码更可能参考了我观看的 yt，因为我仍然是 Web 开发（前端）的新手。我正在构建侧边栏，但我的 js 返回了我提到的标题中的消息“未捕获的 TypeError：无法设置 null 属性（设置“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 class="container-fluid">
        <div class="sidebar" id="">
            <div class="logo-contents">
                <div class="logo">
                <img href="#">
                <div class="logo-name">w<span>RBMS</span></div>
                </div>
                <span class="material-symbols-sharp" id="sidenavbtn_menu">menu</span>
            </div>
           
            <ul class="sidenav-list">
                <li>
                    <a href="#">
                        <i class="material-symbols-sharp">home</i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="material-symbols-sharp">monitoring</i>
                        <span>MFO</span>
                    </a>
                </li>
               
            </ul>
            
        </div>
    </div>    
    [enter image description here][1]
  </body>
</html>
3个回答

问题出在以下几行： 

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

document.querySelector() 需要一个类似 css 的选择器字符串。如果您希望选择器与 ID 字段匹配，则需要在开头添加 # 。 document.querySelector('#sidenavbtn_menu')

如果您想匹配类字段 document.querySelector('.CLASS_VALUE')

更多信息可在此处找到： CSS-Selectors

但我建议使用方法 document.getElementById('sidenavbtn_menu') ，因为它更适合这种情况。

IISkullsII
2022-08-05
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 class="container-fluid">
        <div class="sidebar" id="">
            <div class="logo-contents">
                <div class="logo">
                <img href="#">
                <div class="logo-name">w<span>RBMS</span></div>
                </div>
                <span class="material-symbols-sharp" id="sidenavbtn_menu">menu</span>
            </div>
           
            <ul class="sidenav-list">
                <li>
                    <a href="#">
                        <i class="material-symbols-sharp">home</i>
                        <span>Home</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="material-symbols-sharp">monitoring</i>
                        <span>MFO</span>
                    </a>
                </li>
               
            </ul>
            
        </div>
    </div>    
    [enter image description here][1]
  </body>
</html>
mgm793
2022-08-05

如果您想使用 document.querySelector ，则必须指定它是 id、类还是其他。例如： document.querySelector('#sidenavbtn_menu'); ，您也可以使用 document.getElementById('sidenavbtn_menu');

document.querySelector('.sidebar'); 将返回具有 .sidebar 的元素数组的第一个元素。如果您想选择具有类的所有元素，您可以执行 document.querySelectorAll(".someClass").forEach((e) => {e.doSomething();});

Cédric
2022-08-05