JavaScript中如何通过getElementByID循环获取列表元素？

原代码存在的问题 #

• 函数未命名，无法被调用执行
• getelementbyID 拼写错误，正确写法是 getElementById（注意大小写规范）
• 初始逻辑不符合需求：目标顺序是dot2→dot3→dot1，但原代码从i=0开始会尝试获取不存在的dot0，循环重置逻辑也错误
• 代码块缺少大括号，导致逻辑执行顺序混乱
• 仅获取元素但未执行实际操作（比如参考代码中的样式修改）

方案一：用数组维护顺序（推荐） #

这种方式逻辑清晰，后续调整顺序只需修改数组即可：

// 按需求的循环顺序定义元素ID列表
const dotIds = ['dot2', 'dot3', 'dot1'];
// 初始索引指向第一个目标元素dot2
let currentIndex = 0;

// 命名函数，方便调用
function getNextDot() {
  // 获取当前循环到的元素
  const currentDot = document.getElementById(dotIds[currentIndex]);
  
  // 执行你需要的操作（比如参考代码中的修改背景色）
  if (currentDot) {
    currentDot.style.backgroundColor = "#ad6e1b";
  }
  
  // 更新索引，实现循环：索引超出数组长度时自动重置为0
  currentIndex = (currentIndex + 1) % dotIds.length;
  
  // 返回元素，方便后续扩展使用
  return currentDot;
}

方案二：用计数器直接控制 #

如果想沿用你最初的计数器思路，修正后的代码如下：

// 初始值设为2，对应第一个目标元素dot2
let i = 2;

function getNextDot() {
  const targetId = `dot${i}`;
  const currentDot = document.getElementById(targetId);
  
  if (currentDot) {
    currentDot.style.backgroundColor = "#ad6e1b";
  }
  
  // 按规则更新计数器：2→3→1→2...循环
  i = i === 3 ? 1 : i + 1;
  
  return currentDot;
}

使用说明 #

需要触发函数才能执行循环逻辑，比如绑定到按钮点击：

// 假设有一个按钮，点击时切换元素
document.querySelector('#triggerBtn').addEventListener('click', getNextDot);

或者用定时器自动循环：

// 每2秒自动切换一次
setInterval(getNextDot, 2000);

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