當試圖訪問存儲在變量中的元素的值時，爲什麼會出現類型錯誤？

-1

我在將輸入元素存儲在JavaScript變量中時遇到問題。請參閱下面的代碼。註釋掉的位不起作用。代碼按原樣運行;但是，它不是乾的。它過於冗長。將元素存儲在一個變量中會清理一些東西，但是當我嘗試這樣做時（並將值推送到x數組），我得到一個「未捕獲類型錯誤：無法讀取屬性value的null」。當試圖訪問存儲在變量中的元素的值時，爲什麼會出現類型錯誤？

請參閱附加的標記和腳本。當我使用document.getElementById的變量形式時，爲什麼會出現此錯誤，但是當我反覆硬編碼元素時，不會出現此錯誤？

的JavaScript：

var x = []; 
var y = []; 

//var xInput = document.getElementById("xInput"); 
//var yInput = document.getElementById("yInput"); 

//var dataBox = document.getElementById("display"); 

function insert() { 
    x.push(document.getElementById("xInput").value); 
    y.push(document.getElementById("yInput").value); 
    clearAndShow(); 
} 

function clearAndShow() { 
    //Clear fields 
    xInput.value = ""; 
    yInput.value = ""; 

    //Show output 
    document.getElementById("display").innerHTML = ""; 
    document.getElementById("display").innerHTML += "X: " + x.join(", ") + "</br>"; 
    document.getElementById("display").innerHTML += "Y: " + y.join(", ") + "</br>"; 
}

HTML：

<body> 
    <div class="container"> 
     <form> 
      <h2>Delay Discounting - Enter X (Delay) and Y (Value)</h2> 
      <input id="xInput" type="number" placeholder="x (delay)" /> 
      <input id="yInput" type="number" placeholder="y (value)" /> 
      <input type="button" value="save/show" onclick="insert()" /> 
     </form> 
     <div id="display"></div> 
    </div> 
</body>

來源

2014-11-14 Travis Jones

似乎很好的工作http://jsfiddle.net/j08691/h5u6b5dg/ – j08691 2014-11-14 15:12:58

這個腳本在哪裏/什麼時候運行？如果它在（或從中加載）''，那些元素還不存在（當註釋行被運行時）。當insert（）函數本身運行時，它們就會執行。 – 2014-11-14 15:13:44

Paul Roub，謝謝！就是這樣。我在元素存在之前在頭文件中加載腳本！哇。我花了數小時試圖弄清楚。很好的教訓。 – 2014-11-14 15:17:27