How to fix “Cannot read properties of null (reading ‘addEventListener’)”? Already checked “duplicated” questions [closed]

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>