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

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

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

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

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

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

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

window.onload = function(){
  xxxx
};

<!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>

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