使用JavaScript的HTML選擇選項不起作用

Question

以下代碼（在文件formBuilder1.js中）給出了這個錯誤：

未捕獲的TypeError：無法讀取null的屬性'appendChild'。

我該怎么做才能解決這個問題？

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);

HTML代碼如下：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>


<script src="formBuilder1.js"></script>

<select id="Medium"></select>
</body>
</html>

提前致謝。

Answer 1

當你放入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

使用JavaScript的HTML選擇選項不起作用

問題描述

1 個解決方案

解決方案1
0 2017-02-26 14:00:07

使用JavaScript的HTML選擇選項不起作用

問題描述

1 個解決方案

解決方案1 0 2017-02-26 14:00:07

解決方案1
0 2017-02-26 14:00:07