Продолжайте получать сообщение об ошибке «не могу прочитать свойство со значением NULL»

Question

Я работаю над собственным сайтом и пока не разбираюсь в кодах. Когда я прокручиваю вниз, я хочу показать другое содержимое панели навигации, а когда я наверху, появляется оригинальная панель навигации. Я хочу, чтобы это было сделано в чистом JavaScript без каких-либо библиотек или фреймов. Пожалуйста, смотрите коды ниже, и я знаю, что коды не организованы. Я сделаю это позже.


    var nav = document.querySelector("nav");
var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

window.onscroll = function(){
    if(document.body.scrollTop > 70){
        hide.style.display = "block";
        appear.style.display = "none"
    } else {
        hide.style.display = "none";
        appear.style.display = "block"
    }
}


    nav{
    list-style-type: none;
    text-align: center;
    background-color: #3FA9A5;
    position: sticky;
    top: 0;
}

.hide{
    font-size: 70px;
    font-family: 'Long Cang', cursive;
    display: block;
}
.appear{
    height: 70px;
    display: none;
}

.appear img{
    width: 210px;

}

ul{
    margin: 0 auto;
    padding: 0;
}

body{
    margin: 0;
}

.container{
    max-width: 1080px;
    width: 95%;
    margin: 10px auto;
    display: grid;
    grid-template-columns: 25% 50% 25%;

}


.text{
    text-align: center;
}


.profile {
    border: 1px solid black;
    padding: 0 10px 20px 10px;

}

#main{
    width: 100%;
}

.post{
    margin-left: 4.165%;
}

#image{
    width: 100%;
}

#post-divide{
    margin-left: 10px;
    margin-right: 10px;
}

.comments{
    width: 100%;
    margin-top: 68.5px;
    padding-bottom: 293.5px;
    border: 1px solid black;
}
 h2{
    text-align: center;
 }

 .center{
    grid-column: 2;
 }


        <link rel="stylesheet" type="text/css" href="test.css">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Long+Cang&display=swap" rel="stylesheet">
    <title>test</title>
</head>
<body>
<nav>
    <ul>
        <li class="hide">Unknown</li>
        <li class="appear"><img src="cat.png"></li>
    </ul>
</nav>

<div class="container">

        <div class="col-1">
            <div class="profile text">
                <img id="main" src="https://data.whicdn.com/images/86629641/superthumb.jpg?t=1384568664">
                <hr>
                <p>12 posts</p>
                <p>instagram</p>
                <button>Subscribe!</button>
            </div>
        </div>

        <div class="col-1">
            <div class="post">
                <h2>TITLE</h2>
                <div>
                    <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
                </div>
                <hr id="post-divide">
            </div>
        </div>

        <div class="col-1">
            <div class="comments text"></div>
        </div>

        <div class="col-1 center">
            <div class="post">
                <h2>TITLE</h2>
                <div>
                    <img id="image" src="https://i.pinimg.com/originals/76/d4/8c/76d48cb2928845dfcfab697ac7cbcf1c.jpg">
                </div>
                <hr id="post-divide">
            </div>
        </div>

        <div class="col-1">
            <div class="comments text"></div>
        </div>
</div>

Я думаю, что я должен что-то добавить в код JS, но не знаю почему. Буду благодарен, если вы посоветуете мне, как я могу написать код HTML / CSS, чтобы мне не пришлось создавать 2 панели навигации, если это возможно.

javascript html css

0

Anette X 28 Окт 2019 в 14:40

Answer 1

var hide = document.querySelector(".hide");
var appear = document.querySelector(".appear")

Таким образом, вы должны использовать селектор класса

0

maximelian1986 28 Окт 2019 в 11:44

Answer 2

Следующая инструкция:

document.querySelector("hide");

Будет ли запрашивать такие элементы, как:

<hide></hide>

Поскольку простые селекторы без префикса (div, header, span) будут запрашивать целые теги элемента, а не классы или атрибуты.

Может быть, вы хотели запросить класс, используя .:

document.querySelector(".hide");

2

Cristian Traìna 28 Окт 2019 в 11:44

Answer 3

Вы используете «спрятать» и «появляться» в качестве селекторов, но они не существуют в вашем HTML.

Вместо этого используйте «.hide» и «.appear» в вашем querySelector.

 var hide = document.querySelector(".hide"); 
 var appear = document.querySelector(".appear");

0

Alvaro Mayo 28 Окт 2019 в 11:47

Answer 4

Поскольку обе навигационные панели имеют статические данные, я бы посоветовал оставить их обоих и следовать ответам парней, которые предложили обновить параметр querySelector. Или вы можете скрыть / показать данные внутри панели навигации (в вашем случае это всего лишь ul элемент) и оставить всю панель навигации всегда видимой. Таким образом, вы можете поместить классы появляются / скрываются в ul элемент вместо navbar, а затем в JS получают их с document.querySelector('.navbar .hide') и document.querySelector('.navbar .appear').

Использование framework / library определенно упростит это. Однако, если вы все еще хотите иметь только одну навигационную панель в чистом js / html / css (или это просто динамические данные), я, вероятно, сделал бы так:

Html:

<nav class="navbar">
  <ul>
    <li><img src="cat.png"></li>
  </ul>
</nav>

Где-то в JS:

var navbarUl = document.querySelector('.navbar ul');
window.onscroll = function() {
  if (document.body.scrollTop > 70) {
    navbarUl.innerHtml = '';
    navbarUl.appendChild(getTopNavbarHTML);
  } else {
    navbarUl.innerHtml = '';
    navbarUl.appendChild(getNavbarHTML);
  }
}

GetNavbarHTML и getTopNavbarHTML - вернут documentFragment с элементами li, подробнее см. https://www.w3schools.com/jsref/met_document_createdocumentfragment.asp

Но изменение DOM во время события прокрутки может значительно снизить производительность веб-приложения.

0

Egor S. 28 Окт 2019 в 12:49

Продолжайте получать сообщение об ошибке «не могу прочитать свойство со значением NULL»

4 ответа

Похожие вопросы

Новые вопросы

javascript