weixin_47213043
2021-01-14 09:23
采纳率: 100%
浏览 763

JS中报错Cannot set property 'onclick' of null

这段代码希望点击四个按钮分别为四个小li添加,删除,修改不同样式。我不知道这段代码中哪里出问题了,现在点击后没有反应,检查报错如下:Uncaught TypeError: Cannot set property 'onclick' of null  at window.onload。有哪位大神帮忙看看?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • 超小少 2021-01-15 09:17
    已采纳

    复制了你的代码,经测试发现,你的input标签设置的id是中文字符的引号,应换为英文字符下的引号,就可以正常运行了

    点赞 评论
  • 禅思院 2021-01-14 10:05

    代码贴下把  写法上没看出问题

    点赞 评论
  • zhshchilss 2021-01-14 10:09

    报的onClick有问题,你就console一下querySelector得到的按钮dom是否存在。

    是不是ui没渲染完,就执行js代码了

    点赞 评论
  • storm_huang 2021-01-14 11:22

    把注入onclick的js代码放到window.onload里面,如:

    window.onload = function(){
      xxxx
    };
    点赞 评论
  • weixin_47213043 2021-01-14 20:07
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>H5操作类样式</title>
        <style>
            .red{
                color: red;
            }
            .green{
                color: green;
            }
            .blue{
                color: blue;
            }
            .underline{
                text-decoration: underline;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>经管学院</li>
            <li class='blue'>信通学院</li>
            <li>计算机学院</li>
            <li>软件学院</li>
        </ul>
        <input type="button" value="为第一个li元素添加样式" id=”add“>
        <input type="button" value="为第二个li元素移除样式" id=’remove‘>
        <input type="button" value="为第三个li元素切除样式" id=’toggle‘>
        <input type="button" value="判断第四个li元素是否包含某个样式" id=’contain‘>
        <script>
                /*add:为元素添加指定名称的样式*/
                document.querySelector("#add").onclick = function(){
                    /*classList:为当前元素的所有样式列表-数组*/ 
                    document.querySelector("li").classList.add("red");
                    document.querySelector("li").classList.add("underline");
                    /*这里add只能增加一种样式*/ 
                } 
                document.querySelector("#remove").onclick=function(){
                    document.querySelector(".blue").classList.remove("blue");
                }
        </script>
    </body>
    </html>
    点赞 评论
  • weixin_47213043 2021-01-14 20:14

    我试了增加不增加window.onload=function(){}; 都是报一样的错误!还请大神帮忙看看

    点赞 评论

相关推荐 更多相似问题