使用JavaScript的HTML选择选项不起作用

时间:2017-02-26 12:36:12

标签: javascript html-select

以下代码(在文件formBuilder1.js中)给出了这个错误:

  

未捕获的TypeError:无法读取属性" appendChild' null。

我该怎么做才能解决这个问题?

www.mysite.com/index.php?dashboard_id=1

HTML代码如下:

var medium = ["Luft","Wasser"];
var selectElement = document.getElementById('Medium');
for(var i=0;i<2;i++){
    var opt = document.createElement('option');
    opt.innerHTML = medium[i];
    opt.value = medium[i];
    selectElement.appendChild(opt);

提前致谢。

1 个答案:

答案 0 :(得分:0)

当放入jsFiddle(https://jsfiddle.net/vj5s165e/)时,您的代码可以正常工作。正如您对OP的评论中所提到的,您需要在将元素添加到DOM之后包含您的JS。

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
<body>
    <select id="Medium"></select>
    <script src="formBuilder1.js"></script>
</body>
</html>

还考虑将JavaScript包装在window.onload函数中,以防止它在DOM准备好之前执行。https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload