相同getElementById代码为何在一个区块生效另一个区块失效？

问题描述 #

我有两个字段（machine和plant），需要根据用户在输入区域的选择自动生成内容。其中machine的下拉选项通过数组生成，plant的下拉选项为硬编码形式。目前plant字段可正常自动填充到标签对应位置，但machine字段无法实现。两者使用了相同的代码片段填充字段，我无法找到问题所在。

我对两个区块都使用了相同的getElementById方法，尝试移除可正常工作的区块，未发现变化；尝试交换名称和id，也无改善；通过交换两个字段验证了CSS的正确性，plant字段可在machine区块正常显示。

问题原因分析 #

1. 变量名冲突：你定义了一个名为machine的全局数组，同时下拉框的id也是machine。在myFunction2中，你使用machine.options试图访问下拉框的选项，但此时machine指向的是你定义的数组而非DOM元素，数组没有options属性，导致无法获取选中项。而plant字段能正常工作是因为浏览器会自动为id为plant的DOM元素创建全局变量，且没有同名变量冲突。
2. 缺少目标输入元素：machine对应的显示区域缺少id为disp2的input元素，即使修复了变量问题，也无法将选中值填充进去。

修复后的代码 #

1. 修改machine的选择事件处理函数 #

将myFunction2中的machine.options替换为获取到的DOM元素变量mylist2：

function myFunction2() {
    var mylist2 = document.getElementById("machine");
    document.getElementById("disp2").value = mylist2.options[mylist2.selectedIndex].text;
}

2. 补充disp2输入元素 #

在mch的div中添加对应的input元素：

<div class="mch">
    <script>
        const mch1 = document.getElementById("machine").value
        function myFunction2() {
            var mylist2 = document.getElementById("machine");
            document.getElementById("disp2").value = mylist2.options[mylist2.selectedIndex].text;
        }
    </script>
    <p><input type="text" id="disp2" size="3">-</p>
</div>

3. （可选）优化变量命名避免冲突 #

建议将全局数组machine重命名为machineOptions之类的名称，避免和DOM元素id混淆，减少后续出错概率：

// 头部的脚本修改
var machineOptions = ['','WH','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20',
'21','22','23','24','25','26','27','28','29','30','31','32','33','34'];
for (i=0; i < 99; i++) {
    var opt = Math.floor(Math.random() * 99);
    machineOptions.push(opt);
}

$(function() {
    var options = '';
    for (var i = 0; i < machineOptions.length; i++) {
        options += '<option value="' + machineOptions[i] + '">' + machineOptions[i] + '</option>';
    }
    $('#machine').html(options);
});

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