Flickity: Uncaught TypeError: Cannot read property 'querySelectorAll' of null

Question

我已经调试了几个小时的 js 代码，我无法消除错误。我错过了什么或添加了一些不正确的代码吗？错误说：

consultationSlider.js:9 未捕获类型错误：cellsButtons.querySelectorAll 不是函数在 consultationSlider (consultationSlider.js:9) 在 HTML 文档。 (index.js:16)

这是我的代码：

JS

const consultationSlider = () => {
  
  const elem = document.querySelector('.consultation-slider');
  const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap');
  const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav'); 

  const flkty = new Flickity( elem, {
    pageDots: false,
    wrapAround: true,
    imagesLoaded: true,
    cellAlign: 'center'
  });

  // if(elem) {
  //   new Flickity( elem, {
  //     pageDots: false,
  //     wrapAround: true,
  //     cellAlign: 'center'
  //   });
  // }

  for (const [i, cellsButton] of cellsButtons.entries()) {
    cellsButton.addEventListener('click', function(event) {
      flkty.select( i );
    })
  }

 if (typeof NodeList.prototype.forEach !== 'function')  {
    NodeList.prototype.forEach = Array.prototype.forEach;
  }
}

导出默认咨询滑块； SCSS

.consultation-slider {
  width: getvw(1200px);
  height: getvw(800px);
  @include sp {
    width: 100%;
    height: 100%;
  }

  &__cell {
    width: getvw(1200px);
    height: getvw(800px);
    @include sp {
      width: 100%;
      height: auto;
    }
  }

  &__nav {
    display: block;
    width: getvw(160px);
    height: getvw(108px);
    margin-top: getvw(10px);
    cursor: pointer;
    @include sp {
      width: getvw(230px);
      height: auto;
      margin-top: getsp375(10px);
    }
  }

  &__nav-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: getvw(1200px);
    @include sp {
      width: 100%;
    }
  }

  &__row {
    text-align: center;
    width: getvw(1200px);
    @include sp {
      width: 100%;
    }
  }

  .flickity-button-icon {
    display: none;
  }

  .next,
  .previous {
    height: 80px;
    width: 80px;
    border: 1px solid $white;
    border-radius: 0;
    background: transparent;
    @include sp {
      display: none;
    }

    &::before {
      content: '';
      position: absolute;
      width: 11px;
      height: 18px;
      bottom: 50%;
      transform: translateX(-50%) translateY(50%);
      background: {
        image: url('/img/icons/slider-arrow.png');
        size: 100%;
        repeat: no-repeat;
      }
      @include sp {
        display: none;
      }
    }
  }

  .previous {
    &::before {
      transform: rotate(180deg) translateX(50%) translateY(-50%);
    }
  }
}

哈巴狗

.consultation-slider
  img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
  img.consultation-slider__cell(src='/img/gray-bg-small.jpg')
  
.consultation-slider__button-row
  .consultation-slider__nav-wrap
    img.consultation-slider__nav(src='/img/gray-bg-small.jpg')
    img.consultation-slider__nav(src='/img/gray-bg-small.jpg')

Answer 1

我的代码是运行在页面上存在 dom 元素之前，因此当它尝试查询页面中的元素时，结果为空我确保我的代码在 dom 加载后执行所以我在这里添加了 if 语句：

const consultationSlider = () => { const elem = document.querySelector('.consultation-slider');

如果（元素）{ const flkty = new Flickity(元素, { pageDots：假的，环绕：真，图片加载：真实，单元格对齐：'center' }); const cellsButtonGroup = document.querySelector('.consultation-slider__nav-wrap'); const cellsButtons = cellsButtonGroup.querySelectorAll('.consultation-slider__nav'); for (const [i, cellsButton] of cellsButtons.entries()) { cellsButton.addEventListener('click', 函数(事件) { flkty.select(我); }) } } }

导出默认咨询滑块；

Flickity: Uncaught TypeError: Cannot read property 'querySelectorAll' of null

Flickity: Uncaught TypeError: Cannot read property 'querySelectorAll' of null

html

javascript

css

sass

flickity