JavaScript不能看空的财产“价值” [英] Javascript Cannot read property 'value' of null
问题描述
晚安计算器。
我有一个JavaScript片段，在工作的jsfiddle但实际的HTML无法正常工作的问题。
I'm having a problem with a Javascript snippet, that works in JSFiddle but does not work on actual HTML.
我为什么它不工作要旨，当下面的线被称为：
I have a gist of why it doesn't work, when the following line is called:
while (list.firstChild) {
目前时间点列表的值仍然是零。所以它可能在这一点上和好如初。
At that point in time the value of list is still null. So it might at this point crash and burn.
但是，为什么它在拨弄工作？
However, why does it work in the fiddle?
我知道我可以通过添加一个项目previous到列表中解决这个问题，以避免出现这种空，但是，我更好奇，为什么会出现差异（怎样的的jsfiddle和HTML不同），以及如何人会去通过对恢复的jsfiddle功能。
I know I can solve this by adding one item previous to the list as to avoid making this null, however, I'm more curious about why the discrepancy appears (How does the jsfiddle and html differ) and how one would go through to restoring the jsfiddle functionality.
这个工作的小提琴
我的test.html不起作用
<script>
var list = document.getElementById('deliveryIdArray');
var names = [];
window.changeText2 = function() {
var deliveryIdentification = document.getElementById('deliveryIdentification').value;
names.push(deliveryIdentification);//simply add new name to array;
//array changed re-render list
renderList();
}
window.renderList = function(){
while (list.firstChild) {
list.removeChild(list.firstChild);
}
//create each li again
for(var i=0;i<names.length;i++){
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(names[i]));
var removeButton = document.createElement('button');
removeButton.appendChild(document.createTextNode("X"));
removeButton.setAttribute('onClick','removeName('+i+')');
entry.appendChild(removeButton);
list.appendChild(entry);
}
}
window.removeName = function(nameindex){
names.splice(nameindex,1);
//array changed re-render list
renderList();
}
window.getDeliveries = function(){
return names;
}
</script>
<html>
<body>
<b>Number </b>
<input id = "deliveryIdentification" name = "deliveryIdentification" type = "text" size = "16" maxlength = "30">
<!-- Array Area Creation -->
<input type='button' onclick='changeText2()' value='Add' />
<ol id="deliveryIdArray">
</ol>
</body>
</html>
任何及所有帮助是极大的AP preciated，有一个伟大的夜晚！
Any and all help is greatly appreciated, have a great night!
推荐答案
您有一个坏的HTML格式。你也可以code。在最后的JavaScript或者您需要的的window.onload 功能，确保塔尔文件是加载。
You have a bad html format. Also you could code the javascript at last or you need the window.onLoad function to ensure thar document is loaded.
<html>
<body>
<b>Number </b>
<input id = "deliveryIdentification" name = "deliveryIdentification" type = "text" size = "16" maxlength = "30">
<!-- Array Area Creation -->
<input type='button' onclick='changeText2()' value='Add' />
<ol id="deliveryIdArray">
</ol>
</body>
<script>
var list = document.getElementById('deliveryIdArray');
var names = [];
window.changeText2 = function() {
var deliveryIdentification = document.getElementById('deliveryIdentification').value;
names.push(deliveryIdentification);//simply add new name to array;
//array changed re-render list
renderList();
}
window.renderList = function(){
while (list.firstChild) {
list.removeChild(list.firstChild);
}
//create each li again
for(var i=0;i<names.length;i++){
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(names[i]));
var removeButton = document.createElement('button');
removeButton.appendChild(document.createTextNode("X"));
removeButton.setAttribute('onClick','removeName('+i+')');
entry.appendChild(removeButton);
list.appendChild(entry);
}
}
window.removeName = function(nameindex){
names.splice(nameindex,1);
//array changed re-render list
renderList();
}
window.getDeliveries = function(){
return names;
}
</script>
</html>
或者你可以注册时文件加载处理事件：
<html>
<head>
<meta charset="utf-8">
<script>
document.addEventListener("DOMContentLoaded", init);
function init(){
var list = document.getElementById('deliveryIdArray');
var names = [];
window.changeText2 = function() {
var deliveryIdentification = document.getElementById('deliveryIdentification').value;
names.push(deliveryIdentification);//simply add new name to array;
//array changed re-render list
renderList();
}
window.renderList = function(){
while (list.firstChild) {
list.removeChild(list.firstChild);
}
//create each li again
for(var i=0;i<names.length;i++){
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(names[i]));
var removeButton = document.createElement('button');
removeButton.appendChild(document.createTextNode("X"));
removeButton.setAttribute('onClick','removeName('+i+')');
entry.appendChild(removeButton);
list.appendChild(entry);
}
}
window.removeName = function(nameindex){
names.splice(nameindex,1);
//array changed re-render list
renderList();
}
window.getDeliveries = function(){
return names;
}
};
</script>
</head>
<body>
<b>Number </b>
<input id = "deliveryIdentification" name = "deliveryIdentification" type = "text" size = "16" maxlength = "30">
<!-- Array Area Creation -->
<input type='button' onclick='changeText2()' value='Add' />
<ol id="deliveryIdArray">
</ol>
</body>
</html>
这篇关于JavaScript不能看空的财产“价值”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
