如何使用JS、HTML、CSS让输入框提交的每第三个列表项变为指定颜色？

现有代码问题 #

你当前的代码存在两个核心错误：

• 逻辑判断对象错误：你拿输入框的文本值做模3运算，若输入非数字内容会直接得到NaN，完全无法匹配「每第三个列表项」的需求
• 语法错误：JS代码中不能直接写color: red设置样式，需要通过DOM元素的style属性赋值

推荐实现方式 #

方案1：纯CSS实现（最简单，无需额外JS逻辑） #

直接给列表添加CSS伪类规则即可自动匹配每第三个元素：

/* 把your-list-id替换成你实际的列表容器id */
#your-list-id li:nth-child(3n) {
  color: blue;
}

这个方案会自动适配新增/删除的列表项，不需要每次新增元素时跑JS判断。

方案2：JS动态判断实现 #

如果确实需要用JS控制，每次新增列表项后执行以下逻辑即可：

// 1. 获取所有列表项，your-list-id替换为实际的列表容器id
const listItems = document.querySelectorAll('#your-list-id li')

listItems.forEach((item, index) => {
  // 先重置原有颜色避免样式残留
  item.style.color = ''
  // 列表索引从0开始，所以+1后模3等于0就是每第三个
  if((index + 1) % 3 === 0) {
    item.style.color = 'blue'
  }
})

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