I have this js code, where i try to make an item appear and disappear when i go on the top of it with my mouse, but for some reason this ain’t working and it keeps giving me back this error in the console: Cannot read properties of null (reading 'addEventListener')
.
I don’t know if i can use element.onmouseover = function () {...
too, but i’d like it to work first of all!
I was expecting it to make appear and disappear the item ongoing_p
.
I have my script LINKED to the bottom of the body, INSIDE the body, and a onload: MainJs ()
on the body tag.
I have already checked this: Why does jQuery or a DOM method such as getElementById not find the element?
and this: How to fix “Cannot read properties of null (reading ‘addEventListener’)”?
but i didn’t understand how to fix my code.
function MainJs() {
var ongoing = document.getElementById("ongoing");
var ongoing_p = document.getElementById("ongoing-p");
ongoing.addEventListener("mouseover", function () {
ongoing_p.style.display = "block";
});
ongoing.addEventListener("mouseout", function () {
ongoing_p.style.display = "none";
});
}
<header>
<ul>
<li>
<a href="#">home</a>
<div class="parall"></div>
</li>
<li>
<a href="pages/purecss.html">pure css</a>
<div class="parall"></div>
</li>
<li>
<a href="pages/nextprojects.html">next projects</a>
<div class="parall"></div>
</li>
</ul>
</header>
<section class="main">
<nav class="lateral">
<ul>
<li id="ongoning">
<a href="">ongoing projects</a>
<div class="underline"></div>
</li>
<li id="latest">
<a href="">latest release</a>
<div class="underline"></div>
</li>
<li id="templates">
<a href="">my templates</a>
<div class="underline"></div>
</li>
</ul>
</nav>
<span class="preview">
<p id="ongoing-p" style="display: none;">there isn't any ongoing project at this moment, you can
retry in a few time!
</p>
<p id="latest-p" style="display: none;">nothing released yet, come back soon!</p>
<p id="templates-p" style="display: none;">templates are being loaded up at this time,
some more day of patient!
</p>
</span>
</section>