Question

如何解决：“无法读取 null 的属性‘classList’”？

2019-01-06

8411

javascript html css

所以我坐在这里开始创建我的第一个 Electron 应用程序。

在此期间，我尝试通过添加带有 Javescript“onclick”的类“TEST”向 < a > 标签添加特定样式。

但是，这返回了错误：“无法读取 null 的属性‘classList’”

现在，我明白这是因为 GetElementById 以某种方式返回了 null 或未定义，但我不明白为什么！

我已经按照 W3Schools 的指南进行了操作，现在已经很晚了，但我很确定我已经完全按照他们做的了。我也阅读了相关的帖子，但到目前为止没有任何内容能帮助到我。

我的代码：

window.onload = function () {console.log('JS loaded!')};

function addClassStyle () {
    var x = document.getElementById('test')
    x.classList.add('TEST')
};

* {
    padding:0;
    margin:0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background-color: #2f2f2f;
}

ul{
    list-style:none;
}

li {
    color: #ebebeb;
    padding: 10px 0px 10px 5px;
}

#navbar {
    background-color: #1c1c1c;
    height: 100%;
    width: 95px;
}

a {
    text-decoration: none;
}

li:hover {
    background-color: rgba(119, 119, 119, 0.36);
}

.TEST {
    background-color: white;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Getting Stuff Done</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>

<!-- <h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>. -->

<div id="navbar">
    <ul>
        <a href="#"><li>Inbox</li></a>
        <a href="projekter.html" id="test" onclick="addClassStyle()"><li>Projekter</li></a>
        <a href="forecast.html"><li>Forecast</li></a>
        <a href="review.html"><li>Review</li></a>
    </ul>
</div>

</body>

<script src="script.js"></script>
</html>

我非常感谢任何帮助！

提前致谢！

Answer 1

您的 CSS 存在问题 -> ul a.test li 另外，您的点击正在加载另一个页面，因此不起作用。添加了 event.preventDefault()

window.onload = function () {console.log('JS loaded!')};

function addClassStyle () {
    event.preventDefault();
    let x = document.getElementById('test');
    console.log(x);
    x.classList.add('test');
    x.classList.forEach(c => console.log(c));
};

* {
    padding:0;
    margin:0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background-color: #2f2f2f;
}

ul{
    list-style:none;
}

li {
    color: #ebebeb;
    padding: 10px 0px 10px 5px;
}

#navbar {
    background-color: #1c1c1c;
    height: 100%;
    width: 95px;
}

a {
    text-decoration: none;
}

li:hover {
    background-color: rgba(119, 119, 119, 0.36);
}

ul a.test li {
    background-color: #FFFFFF;
    color: red;
}

<div id="navbar">
    <ul>
        <a href="#"><li>Inbox</li></a>
        <a href="projekter.html" id="test" onclick="addClassStyle()"><li>Projekter</li></a>
        <a href="forecast.html"><li>Forecast</li></a>
        <a href="review.html"><li>Review</li></a>
    </ul>
</div>