Помогите исправить ошибку в скрипте

Question

Написал js код, который при наведении на элемент меню div выдает всплывающее окно,однако-не срабатывает. Выдает ошибку: Cannot set property 'onmouseover' of null at script.js:1 Хотя id со значением nav у меня имеется.

document.getElementById("nav").onmouseover = function(event) {
    let target = event.target;
    if (target.className == "menu-item") {
    let s = target.getElementsByClassName ("submenu");
    closeMenu();
    s[0].style.display = "block";
    }
}


document.onmouseover = function (event) {
    let target = event.target;
    console.log(event.target);
    if (target.className!="menu-item" && target.className!="submenu") {
    closeMenu();
    }
}

function closeMenu() {
    let menu = document.geElementById("nav")
    let subm = document.getElementsByClassName("submenu")
    for (let i=0; i <  subm.length; i++) {
        subm[i].style.display = "none";
    }
}

.fullscreen-bg {
    overflow: hidden;
    position: relative;
    height: 100%;
    width: 100%;
    padding-top: 45%;
}

    .overlay {
    background: rgba(0,0,0,0);
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
}

    .overlay2 {
    background: rgba(0,0,0,0.5);
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 4;
}
    .fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
    p {
     text-align: center;
     padding-bottom: 250px;
     color: white;
}

    .tga {
     color: white;
     font-family: Bradley Hand, cursive;
     font-style: italic;
     item-align: centerS;
}

     .menu-item {
      color: white;
      border: 2px solid white;
      display: inline-block;
      position: relative;
      text-align: center;
      margin: 150px 12px 150px 12px;
      background-color: gray;
      font-family: New courier;
}

     .menu-item > .submenu{
      height: 40px;
      width: 100px;
      position: absolute;
      background-color: green;
}

    .menu-item:hover {
    cursor: pointer;
}

     .menu-item > .submenu:hover {
    cursor: pointer;
}

<!DOCTYPE html>
<html>
<body>

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

<div class="fullscreen-bg">
<div id="nav"; class="overlay2">
    <div class="overlay">

<p>

<strong class="tga">

Hey Everyone! My name is blah-blah!<br>
I'm a beginer for web-development and web-design. I'd appreciate if you choose me as a designer for you project (even if my salary is marginally low).<br>
Because every job I will make will be my advantage in the future! 

</strong>

</p>

<hr />

<p>

    Learnin' JS with conscience

</p>

</div>

    <div class="menu-item">
         Контакты
            <div class="submenu">
                INSTAGRAM
                    <div class="submenu">VK
    </div></div></div>

    <div class="menu-item">
        Мое портфолио
            <div class="submenu">В процессе ;)
                </div></div>

</div>
    
    <video loop="" muted="" autoplay="" poster="video/plane.jpg" class="fullscreen-bg__video">
        <source src="https://sitehere.ru/examples/30.06.2015/video/plane.mp4" type="video/mp4">
        <source src="video/plane.webm" type="video/webm">
    </video>

</div>

</style>

</body>

</html>

Answer 1

window.addEventListener("load", function(){
  document.getElementById("nav").onmouseover = function(event) {
    ...
  }
});

БЛОГ НА HUSL

Помогите исправить ошибку в скрипте

Ответы (1 шт):