如何用迭代变量选择HTML元素？JS灯泡案例扩展性优化

我是JavaScript初学者，完成了一项自制练习：创建N个可单独开关的灯泡，同时实现一键全开关、随机开关功能。当前代码可正常运行，但需手动编写每个灯泡的相关代码，完全不具备扩展性。我的问题是：如何改进代码，通过迭代变量选择HTML元素？例如，用类似document.getElementById('bulbN')（N为变量）的写法替代固定的document.getElementById('bulb0')。我知道需要用循环实现，但尝试以下两种写法均报错：

1. getElementById('"' + bulb + N + '"').innerHTML
2. 将('"' + bulb + N + '"')定义为单独变量后使用。
   恳请提供解决方法及优化后的代码。

错误原因 #

你之前的写法错误地给ID添加了额外的嵌套引号。getElementById的参数是元素的ID字符串本身，不需要再用引号包裹。正确的拼接方式是直接写'bulb' + N，这样会生成'bulb0'、'bulb1'这类符合你ID命名的字符串。

优化后的代码 #

我们可以通过定义灯泡总数、动态生成DOM元素、封装通用函数来实现完全可扩展的版本——想要增加灯泡数量，只需要修改bulbCount的值即可：

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

<!-- 用于存放所有灯泡的容器 -->
<div id="bulbContainer"></div>

<p></p>

<button onclick="turnAllOn()">Turn All lights ON</button>
<button onclick="turnAllOff()">Turn All lights OFF</button>
<button onclick="turnRandom()">Turn Random light ON</button>

<script>
// 定义灯泡总数，修改这个值即可增减灯泡数量
const bulbCount = 3;
const bulbContainer = document.getElementById('bulbContainer');

// 动态生成每个灯泡的按钮和图片
for (let i = 0; i < bulbCount; i++) {
    // 创建开关按钮和图片元素
    const onBtn = document.createElement('button');
    onBtn.textContent = 'Turn on the light';
    onBtn.onclick = () => toggleBulb(i, true);
    
    const bulbImg = document.createElement('img');
    bulbImg.id = `bulb${i}`;
    bulbImg.src = 'pic_bulboff.gif';
    bulbImg.style.width = '50px';
    
    const offBtn = document.createElement('button');
    offBtn.textContent = 'Turn off the light';
    offBtn.onclick = () => toggleBulb(i, false);
    
    // 添加到容器，加换行分隔
    bulbContainer.appendChild(onBtn);
    bulbContainer.appendChild(bulbImg);
    bulbContainer.appendChild(offBtn);
    bulbContainer.appendChild(document.createElement('p'));
}

// 单个灯泡的开关通用函数
function toggleBulb(index, isOn) {
    const bulb = document.getElementById(`bulb${index}`);
    bulb.src = isOn ? 'pic_bulbon.gif' : 'pic_bulboff.gif';
}

// 全亮
function turnAllOn() {
    for (let i = 0; i < bulbCount; i++) {
        toggleBulb(i, true);
    }
    console.log('All lights were turned on');
}

// 全灭
function turnAllOff() {
    for (let i = 0; i < bulbCount; i++) {
        toggleBulb(i, false);
    }
    console.log('All lights were turned off');
}

// 随机亮一个（其余熄灭）
function turnRandom() {
    turnAllOff();
    const randomIndex = Math.floor(Math.random() * bulbCount);
    toggleBulb(randomIndex, true);
    console.log(`Bulb ${randomIndex} turned on`);
}
</script>

</body>
</html>

优化点说明 #

• 可扩展性：只需修改bulbCount的值，就能自动生成对应数量的灯泡组件，无需手动复制粘贴代码
• 代码复用：封装toggleBulb函数处理单个灯泡的开关逻辑，避免重复编写src赋值代码
• 动态DOM生成：用循环批量创建元素，让HTML结构更简洁
• 简洁的选择器写法：使用模板字符串document.getElementById(bulb${index})替代字符串拼接，可读性更强

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