getElementById在本地测试但在JSFiddle中工作时返回null
问题描述:
当试图访问HTML中的元素时,我的代码当前返回null。奇怪的是,它在JSFiddle中测试时工作得很好。以下是jsfiddle链接的副本:http://jsfiddle.net/6f77q/115/。getElementById在本地测试但在JSFiddle中工作时返回null
这是我在两个单独的文件已经做了我的电脑上:
的index.html
<script src="some.js"></script>
<select id="theid" name = "navyOp" onchange="test(this);">
<option selected = "selected">Select a Navy Op Area</option>
<option value = "AN01">AN01</option>
<option value = "AN02">AN02</option>
<option value = "AN03">AN03</option>
</select>
some.js
var earrings = document.getElementById('theid');
var anode=document.createElement("option");
anode.text="hello";
earrings.add(anode);
window.test = function(e){
alert(e.value);
}
我,为什么真糊涂阳极返回空。任何想法,为什么这可能发生在JSFiddle中但不在本地工作的地方?
谢谢!
答
将代码包装在domready/onload事件中,代码尝试执行但元素尚未出现在页面上,因此脚本不会执行所需操作,domready/onload事件允许您执行所有元素都已正确添加到页面后的代码
您在jsfiddle中编写的脚本默认在'onload'回调中执行。但是,您将脚本放在包含'theid'的html代码之前,以便在执行'document.getElementById('theid');'时,包含'theid'的html不被解析并且元素'theid'为不在DOM中。 –
@ t.niese - 你的评论是更具描述性的_than_答案:P – Rayon
我有一种感觉是这个问题,所以我所做的就是复制