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

【问题标题】：HTML error cannot set property of null (anonymous function)HTML 错误无法设置 null 属性（匿名函数）
【发布时间】：2013-10-23 13:18:36
【问题描述】：

我正在尝试将文本框值存储到本地存储中，但是我遇到了 Uncaught TypeError: Cannot set property 'onclick' of null 并且不确定原因。一切似乎都被正确引用了。任何见解将不胜感激。

<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/

【问题讨论】：

为什么你有一个内联处理程序以及一个定义的监听器？

标签： javascript html error-handling

【解决方案1】：

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

【讨论】：

【解决方案2】：

您的代码在 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);
}

【讨论】：

@DenisTulskiy 因为这是跨浏览器的方式
我很高兴我没有任何理由不使用 jquery
@denis 同意，虽然如果唯一的用途是load 事件，jquery 是矫枉过正..

【解决方案3】：

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

您的小提琴搞砸了，因为您在 HTML 标记和 JavaScript 面板中包含了脚本块。 HTML 标记中的那个正在触发错误，因为它没有在 onload 或文档就绪时运行。

【讨论】：

在我的实际项目中，js 仅在索引顶部引用。想出 id 为 jsfiddle 分开它。
问题仍然是你在渲染元素之前调用它。就像我在你走进房间之前叫你的名字一样。我不会得到任何回应。像我在回答中所说的那样，在 window.onload 上运行代码或准备好文档。

【解决方案4】：

如果您取出脚本（您只需要包含正文中的 html）并将其仅放在 js 区域中，您的小提琴就可以工作，因为这是使用 onload 脚本进行渲染：

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

它正确地返回了 localStorage 元素，并且一切都设置得很好。

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

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

【讨论】：