通过函数追加Dropdown选项失败，无法确认函数是否正常执行

问题原因分析 #

• 脚本执行时机错误：如果你的<script>标签放在HTML的<head>里，或者放在<select id="team">元素之前，执行document.getElementById("team")时，浏览器还没解析到这个下拉框元素，导致select变量为null。后续getTeams()函数里调用select.appendChild(el)会直接报错，函数无法正常执行，自然不会添加选项，验证标签也不会更新。
• 事件触发条件不符合预期：onchange事件只有在用户改变下拉框选中项时才会触发。初始状态下用户没操作的话，getTeams()根本不会被调用，所以看不到新增选项。

解决方案 #

方案1：调整脚本位置，确保DOM加载完成后执行 #

把<script>标签放在HTML的<body>末尾（</body>标签之前），这样浏览器解析到脚本时，下拉框元素已经存在：

<select id="team" onchange="getTeams()">
    <option>Dropdown Items</option>
</select>

<!-- 脚本放在body末尾 -->
<script>
let select = document.getElementById("team");
let elmnts = ["HTML", "CSS", "JS"];

function getTeams(){
    for(let i = 0; i < elmnts.length; i++){
       let optn = elmnts[i];
       let el = document.createElement("option");
       el.textContent = optn;
       el.value = optn;
       select.appendChild(el);
    }
}
</script>

方案2：使用DOMContentLoaded事件确保DOM加载完成 #

如果必须把脚本放在<head>里，用DOMContentLoaded事件包裹变量和函数，同时将getTeams挂载到window对象上，确保HTML能找到该函数：

<head>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let select = document.getElementById("team");
    let elmnts = ["HTML", "CSS", "JS"];

    window.getTeams = function(){
        for(let i = 0; i < elmnts.length; i++){
           let optn = elmnts[i];
           let el = document.createElement("option");
           el.textContent = optn;
           el.value = optn;
           select.appendChild(el);
        }
    }
});
</script>
</head>
<body>
<select id="team" onchange="getTeams()">
    <option>Dropdown Items</option>
</select>
</body>

方案3：修改触发时机（页面加载自动添加选项） #

如果不需要用户手动触发，希望页面加载完成就自动添加选项，去掉onchange属性，直接在脚本末尾调用getTeams()：

<select id="team">
    <option>Dropdown Items</option>
</select>

<script>
let select = document.getElementById("team");
let elmnts = ["HTML", "CSS", "JS"];

function getTeams(){
    for(let i = 0; i < elmnts.length; i++){
       let optn = elmnts[i];
       let el = document.createElement("option");
       el.textContent = optn;
       el.value = optn;
       select.appendChild(el);
    }
}

// 页面加载完成自动调用
getTeams();
</script>

调试建议 #

打开浏览器开发者工具（按F12），切换到**控制台(Console)**标签，查看是否有报错信息。如果显示类似Cannot read properties of null (reading 'appendChild')，就说明是脚本执行时机的问题，按上述方案修复即可。

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