document.getElementById()找不到元素，报Uncaught TypeError问题求助

问题背景 #

编写了React风格的轮播代码，预期点击SVG箭头时触发轮播切换，但运行时出现上述错误，确认页面存在目标元素但JS无法获取。

代码示例 #

JSX代码 #

import { currentSlide } from './Carusel';

<div className='app__mainpage'>
  <div className='app__mainpage_banners'>
    <img id='app__banners-banner' src={images.banner_first} alt='Банер' />
    <img id='app__banners-banner' src={images.banner_two} alt='Банер' />
    <img id='app__banners-banner' src={images.banner_three} alt='Банер' />
  </div>
  <div className='app__mainpage_cigarettes'>
    <svg className='app__cigarettes-arrow active' fill='#6C6C6C' onClick={currentSlide(1)}>
      {/* SVG代码 */}
    </svg>
  </div>
</div>

JS代码 #

var slideIndex = 1;
showSlides(slideIndex);

export function currentSlide(n){
  showSlides(slideIndex = n);
}

export function showSlides(n){
  var i;
  var images = document.getElementById("app__banners-banner");
  var cigarettes = document.getElementsByClassName("app__cigarettes-arrow");

  if(n > images.length){
    slideIndex = 1;
  }

  if(n < 1){
    slideIndex = slideIndex.length;
  }

  for(i = 0; i < images.length; i++){
    images[i].style.display = "none";
  }

  for(i = 0; i < cigarettes.length; i++){
    cigarettes[i].className = cigarettes[i].className.replace(" active", "");
  }

  images[slideIndex - 1].style.display = "block";
  cigarettes[slideIndex - 1].className += " active";
}

错误原因分析 #

1. DOM初始化时机错误：JS模块顶部直接调用showSlides(slideIndex)，此时React组件还未完成渲染，DOM元素还未挂载到页面，document.getElementById返回null，后续访问images.length自然报错。

2. 重复ID违反DOM规则：三个img使用了同一个IDapp__banners-banner，ID是DOM中唯一标识，getElementById只会返回第一个匹配元素，即便DOM渲染完成，你也无法获取所有轮播图，且单个DOM元素没有length属性，同样会触发类似错误。

3. React事件绑定错误：onClick={currentSlide(1)}是直接执行函数而非绑定事件，组件渲染时就会立刻调用currentSlide，此时DOM未挂载，进一步导致找不到元素的问题。

4. JS逻辑错误：slideIndex.length是无效写法，slideIndex是数字变量，没有length属性，应该改为images.length。

修复方案 #

1. 调整DOM操作时机 #

在React函数组件中使用useEffect钩子，确保组件挂载后再执行轮播初始化：

import { useEffect } from 'react';
import { currentSlide, showSlides } from './Carusel';

function MainPage() {
  useEffect(() => {
    showSlides(1);
  }, []);

  return (
    // 组件JSX代码
  );
}

2. 替换重复ID为类名 #

将img的ID改为类名，统一获取所有轮播图：

<div className='app__mainpage_banners'>
  <img className='app__banners-banner' src={images.banner_first} alt='Банер' />
  <img className='app__banners-banner' src={images.banner_two} alt='Банер' />
  <img className='app__banners-banner' src={images.banner_three} alt='Банер' />
</div>

// 修改JS中的获取方式
var images = document.getElementsByClassName("app__banners-banner");

3. 修正事件绑定方式 #

传递函数引用给onClick，避免组件渲染时立即执行：

<svg className='app__cigarettes-arrow active' fill='#6C6C6C' onClick={() => currentSlide(1)}>
  {/* SVG代码 */}
</svg>

4. 修复JS逻辑错误 #

if(n < 1){
  slideIndex = images.length;
}

修正后的完整JS示例 #

let slideIndex = 1;

export function currentSlide(n){
  showSlides(slideIndex = n);
}

export function showSlides(n){
  let i;
  const images = document.getElementsByClassName("app__banners-banner");
  const cigarettes = document.getElementsByClassName("app__cigarettes-arrow");

  if(n > images.length){
    slideIndex = 1;
  }

  if(n < 1){
    slideIndex = images.length;
  }

  for(i = 0; i < images.length; i++){
    images[i].style.display = "none";
  }

  for(i = 0; i < cigarettes.length; i++){
    cigarettes[i].className = cigarettes[i].className.replace(" active", "");
  }

  images[slideIndex - 1].style.display = "block";
  cigarettes[slideIndex - 1].className += " active";
}

内容的提问来源于stack exchange，提问作者user14223690