CODEWITHSUNDEEP
javascripthtmlcss
LeeSwaggers
LeeSwaggers

Reputation: 33

How to solve:" Cannot read property 'classList' of null "?

So I'm sitting here starting to create my first Electron app.

During this, I'm trying to add a certain styling to an < a > tag, by adding the class "TEST" with Javescript "onclick".

However this is returning the error: "Cannot read property 'classList' of null"

Now, I get that this is because the GetElementById is somehow returning null or undefined, but I cannot figure out why!

I've followed the guide from W3Schools and it is late right now, but I'm pretty sure I've done exactly as they have. I've also read the related posts, but nothing have helped me out so far.

My Code:

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>

I would really appreciate any help!

Thanks in advance!

Upvotes: 0

Views: 8646

Answers (1)

Bibberty
Bibberty

Reputation: 4768

There was an issue with you CSS -> ul a.test li Also your click was loading another page so would not work. added 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>

Upvotes: 1

Related Questions