JS实现滑块控制矩形着色功能报错，遍历HTML元素遇问题求助

要实现滑动滑块时，让对应数量的矩形变为黄色，其余保持白色，你的代码存在三个关键问题，以下是修复方案：

问题分析 #

• CSS属性名错误：JavaScript操作样式时，CSS属性的短横线命名要转为驼峰命名，backgroundcolor应改为backgroundColor
• 未重置超出滑块值的矩形：当前代码只给前N个矩形着色，但没有把超过滑块值的矩形恢复为初始颜色
• 滑块值类型问题：slider.value返回的是字符串类型，直接用于循环条件可能引发隐式转换问题，建议转为数字类型

修正后的完整代码 #

JavaScript

const slider = document.querySelector('.slider');
const carsContainer = document.querySelector('.cars-container');
const cars = carsContainer.querySelectorAll('.car');

slider.addEventListener('input', function () {
  const sliderValue = Number(slider.value); // 转为数字类型
  console.log(sliderValue);

  // 遍历所有矩形，根据索引判断是否着色
  cars.forEach((car, index) => {
    if (index < sliderValue) {
      car.style.backgroundColor = 'yellow';
    } else {
      car.style.backgroundColor = '#ccc'; // 恢复初始颜色
    }
  });
});

CSS

.slider-container {
  width: 80%;
  margin: 0 auto;
}

.slider {
  width: 100%;
}

.cars-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 1rem;
  margin: 0 auto;
  width: 80%;
}

.car {
  --size: 6.2rem;
  width: var(--size);
  height: calc(var(--size) / 2);
  margin: 0 auto;
  background-color: #ccc;
  border-radius: 1rem;
  transition: transform 0.3s ease-in-out;
}

HTML

<div class="slider-container">
  <input type="range" min="1" max="100" value="5" class="slider" />
</div>

<div class="cars-container">
  <!-- 这里需要填充100个.car元素 -->
  <div class="car"></div>
  <div class="car"></div>
  <!-- 省略中间96个元素 -->
  <div class="car"></div>
</div>

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