Скрипт работает, но выдает ошибку: неперехваченная ошибка типа: не удается прочитать свойство 'classList' с нулевым значением в HTMLAnchorElement

ProgramBox

Скрипт работает, но выдает ошибку: неперехваченная ошибка типа: не удается прочитать свойство ‘classList’ с нулевым значением в HTMLAnchorElement

Post author:admin
Запись опубликована:21 мая, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь создать стилизованную навигацию для слайдера домашней страницы, но получаю некоторые ошибки консоли — хотя скрипт по большей части делает то, что я хочу. Это делается для добавления классов к смежным элементам-братьям при наведении курсора мыши на сфокусированный элемент. Как показано на рисунке, он работает по большей части, но я получаю ошибки при каждом наведении курсора мыши, говорящие о том, что не удается прочитать свойство ‘classList’ с нулевым значением.Кто-нибудь может дать мне представление о том, почему это так, и исправить?

 var sliderNav = document.getElementById('sliderNav');
var paraIns = new Parallax(sliderNav);
var thumbs = document.querySelectorAll('.thumbnail');

thumbs[3].classList.add('active');

for (var i = 0; i < thumbs.length; i  ) {
  thumbs[i].addEventListener('mouseover', function(){
    this.classList.add('active');
    this.previousElementSibling.classList.add('adjacent');
    this.nextElementSibling.classList.add('adjacent');
    this.previousElementSibling.previousElementSibling.classList.add('adjacentx2');
    this.nextElementSibling.nextElementSibling.classList.add('adjacentx2');
  });
  thumbs[i].addEventListener('mouseout', function(){
    this.classList.remove('active');
    this.previousElementSibling.classList.remove('adjacent');
    this.nextElementSibling.classList.remove('adjacent');
    this.previousElementSibling.previousElementSibling.classList.remove('adjacentx2');
    this.nextElementSibling.nextElementSibling.classList.remove('adjacentx2');
  })
}

 html, body {
  margin: 0;
}
.slider {
  background-color: darkgray;
  width: 100%;
  height: 400px;
  position: relative;
  margin-bottom: 1200px;
}
.slider__navigation {
  pointer-events: unset !important;
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 1200px;
  height: 240px;
}
.slider__navigation .thumbnail {
  display: inline-block;
  width: 14%;
  height: 240px;
  float: left;
  padding: 20px;
  z-index: 2;
}
.slider__navigation .thumbnail .thumbnail__img {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  background: lightgray;
  transform: scale(0.7);
}
.slider__navigation .thumbnail:nth-child(2) {
  left: 13% !important;
}
.slider__navigation .thumbnail:nth-child(3) {
  left: 27% !important;
}
.slider__navigation .thumbnail:nth-child(4) {
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.slider__navigation .thumbnail:nth-child(5) {
  left: 56% !important;
}
.slider__navigation .thumbnail:nth-child(6) {
  left: 71% !important;
}
.slider__navigation .thumbnail:nth-child(7) {
  left: 84% !important;
}
.slider__navigation .thumbnail:nth-child(3), .slider__navigation .thumbnail:nth-child(5) {
  z-index: 4;
}
.slider__navigation .thumbnail:nth-child(2), .slider__navigation .thumbnail:nth-child(6) {
  z-index: 3;
}
.slider__navigation .thumbnail.active {
  z-index: 5;
}
.slider__navigation .thumbnail.active .thumbnail__img {
  transform: scale(1);
}
.slider__navigation .thumbnail.adjacent {
  z-index: 4;
}
.slider__navigation .thumbnail.adjacent .thumbnail__img {
  transform: scale(0.9);
}
.slider__navigation .thumbnail.adjacentx2 {
  z-index: 3;
}
.slider__navigation .thumbnail.adjacentx2 .thumbnail__img {
  transform: scale(0.8);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<div class="slider">
  <div id="sliderNav" class="slider__navigation" data-relative-input="true">
  <a href="#" class="thumbnail" data-depth="0.2">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.4">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.6">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.8">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.6">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.4">
    <div class="thumbnail__img"></div>  
  </a>
  <a href="#" class="thumbnail" data-depth="0.2">
    <div class="thumbnail__img"></div>  
  </a>
</div>
</div>

1. Ошибка означает, что одно из этих .previousElementSibling или nextElementSibling свойств является null .

2. Я удалил свой предыдущий комментарий, извините. На самом деле это вводило в заблуждение. Позвольте мне попробовать еще раз; querySelectors возвращает статический список, и это может вызвать проблемы при обращении к нему позже в коде. Если элемент изменяется, список устаревает. Я бы предложил либо использовать цель события, либо присвоить элементам идентификатор и явно выбрать их там, где требуется.

3. @StevenStark В данном конкретном случае со статическим списком проблем нет. Скорее проблема в том, что при наведении курсора мыши / размытии первого элемента для последнего элемента в #sliderNav нет элемента previous, или предыдущий предыдущий, и нет следующего или next next, следовательно, попытка сослаться classList на эти элементы завершается неудачей.

4. @Teemu ааа, верно, я недостаточно внимательно изучил логику родственного типа. хороший улов.

5. В дополнение к ответу Гая Йогева, вы можете захотеть использовать mouseenter/leave события вместо mouseover/out s, потому что последние срабатывают также, когда эти события происходят внутри ссылки (они переходят по ссылкам и также запускают событие по ссылке). Это не проблема в примере кода, но возникнет, если у вас будет более одного элемента в ссылках.

Ответ №1:

 var sliderNav = document.getElementById('sliderNav');
var paraIns = new Parallax(sliderNav);
var thumbs = document.querySelectorAll('.thumbnail');

thumbs[3].classList.add('active');

for (var i = 0; i < thumbs.length; i  ) {
  thumbs[i].addEventListener('mouseover', function() {
    console.log(!!this.previousElementSibling, !!this.nextElementSibling);
  });
}

 html,
body {
  margin: 0;
}

.slider {
  background-color: darkgray;
  width: 100%;
  height: 400px;
  position: relative;
  margin-bottom: 1200px;
}

.slider__navigation {
  pointer-events: unset !important;
  z-index: 1;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  width: 1200px;
  height: 240px;
}

.slider__navigation .thumbnail {
  display: inline-block;
  width: 14%;
  height: 240px;
  float: left;
  padding: 20px;
  z-index: 2;
}

.slider__navigation .thumbnail .thumbnail__img {
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.12);
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
  background: lightgray;
  transform: scale(0.7);
}

.slider__navigation .thumbnail:nth-child(2) {
  left: 13% !important;
}

.slider__navigation .thumbnail:nth-child(3) {
  left: 27% !important;
}

.slider__navigation .thumbnail:nth-child(4) {
  z-index: 5;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.slider__navigation .thumbnail:nth-child(5) {
  left: 56% !important;
}

.slider__navigation .thumbnail:nth-child(6) {
  left: 71% !important;
}

.slider__navigation .thumbnail:nth-child(7) {
  left: 84% !important;
}

.slider__navigation .thumbnail:nth-child(3),
.slider__navigation .thumbnail:nth-child(5) {
  z-index: 4;
}

.slider__navigation .thumbnail:nth-child(2),
.slider__navigation .thumbnail:nth-child(6) {
  z-index: 3;
}

.slider__navigation .thumbnail.active {
  z-index: 5;
}

.slider__navigation .thumbnail.active .thumbnail__img {
  transform: scale(1);
}

.slider__navigation .thumbnail.adjacent {
  z-index: 4;
}

.slider__navigation .thumbnail.adjacent .thumbnail__img {
  transform: scale(0.9);
}

.slider__navigation .thumbnail.adjacentx2 {
  z-index: 3;
}

.slider__navigation .thumbnail.adjacentx2 .thumbnail__img {
  transform: scale(0.8);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/3.1.0/parallax.min.js"></script>
<div class="slider">
  <div id="sliderNav" class="slider__navigation" data-relative-input="true">
    <a href="#" class="thumbnail" data-depth="0.2">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.4">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.6">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.8">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.6">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.4">
      <div class="thumbnail__img"></div>
    </a>
    <a href="#" class="thumbnail" data-depth="0.2">
      <div class="thumbnail__img"></div>
    </a>
  </div>
</div>

Первый / последний элементы не имеют previousElementSibling / nextElementSibling. смотрите журналы консоли при наведении курсора мыши на элементы.

1. Ах, когда пользователь подходит слишком близко к краям и там меньше братьев и сестер, чем ожидает скрипт, те, которые он не может найти, возвращают null, это имеет смысл! Спасибо!