Question

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

在此期间，我正在尝试通过添加带有Javescript“ onclick”的类“ TEST”向标签添加某种样式。

但是这将返回错误：“无法读取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>

如何解决：“无法读取属性'classList'为null”？

1 个答案: