Question

我正在尝试将文本框值存储到本地存储但是我正在捕获未捕获的TypeError：无法设置null的属性'onclick'并且不确定原因。一切似乎都被正确引用。任何见解都将不胜感激。

<script type="text/javascript">
var save_button = document.getElementById('Save')
save_button.onclick = saveData;

function saveData()
{
    var input = document.getElementById("saveServer");
    localStorage.setItem("server", input.value);
    var storedValue = localStorage.getItem("server");
};
</script>    

<label for="serveri">Server:</label>
<input type='text' name="server" id="saveServer" />
<button onclick="saveData()" type="button" value="Save" id="Save">Save</button>

如果上面没有显示我的问题，这里是整个JSFiddle：http://jsfiddle.net/mGfeu/

Answer 1

在正文后写脚本。脚本执行时不会加载DOM。因此，没有id为'Save'的元素。

Answer 2

您正在寻找在页面上呈现之前的元素。

由于您在HTML标记和JavaScript面板中包含了脚本块，因此您的小提琴搞砸了。 HTML标记中的一个是触发错误，因为它没有在onload或document ready上运行。

Answer 3

您的代码在DOM准备好之前运行（因此.getElementById无法找到您的元素）

将您的代码更改为

// attach events for all browsers
var prefix = window.addEventListener ? "" : "on";
var eventName = window.addEventListener ? "addEventListener" : "attachEvent";
  document[eventName](prefix + "load", init, false);


function init() {
    var save_button = document.getElementById('Save');
    save_button.onclick = saveData;
}

function saveData() {
    var input = document.getElementById("saveServer");
    localStorage.setItem("server", input.value);
    var storedValue = localStorage.getItem("server");
    alert(storedValue);
}

Answer 4

如果您取出脚本（您只需要包含身体中的html）并将其放在js区域中，那么您的小提琴就会起作用，因为这是使用onload脚本进行渲染：

http://jsfiddle.net/spacebean/mGfeu/1/

它正确返回localStorage元素，一切正常。

对于您的代码，请确保将其包装在onload事件中，例如：

<script type="text/javascript">
//<![CDATA[
    window.onload=function(){ /* your js here */ }
//]]>

HTML错误无法设置null属性（匿名函数）

4 个答案: