我试图在不使用jQuery之类的情况下在提交按钮上编写一个不显眼的函数。我的HTML表单中有以下代码:
document.getElementById('help_submit').onclick = function (){
window.alert("You clicked on the Submit Button on the Help Request form.");
};
我尝试使用以下HTML按钮:
<input type="submit" id="help_submit" value="Submit Help Request" />
但是,当我尝试触发事件时,表单不会弹出消息框并提交。
我查看了Chrome中的开发者工具,我看到以下错误:
Uncaught TypeError: Cannot set property 'onclick' of null
编码在哪里出错了?
答案 0 :(得分:3)
在DOM加载之前,您似乎很早就运行了Javascript,因此document.getElementById('help_submit')
找不到DOM元素,因为它还没有在页面中。您可以通过将包含此代码的脚本移动到</body>
标记之前来解决此问题,以便脚本运行时所有DOM元素都将出现。有关此问题的详细信息,请参阅以下答案:pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it。
此外,您的提交处理代码需要阻止提交按钮的默认操作,否则表单仍会提交。但是,如果您不希望表单提交,那么您应该停止使用提交按钮并使用常规按钮。
除了将脚本移动到DOM的末尾之外,我建议您将事件处理代码更改为:
document.getElementById('help_submit').addEventListener('click', function (e) {
e.preventDefault();
window.alert("You clicked on the Submit Button on the Help Request form.");
});
答案 1 :(得分:2)
我没有JavaScript经验,但是,根据已经给出的评论和答案,尝试通过以下方式更改代码:
删除给定的代码(在接下来的步骤中将以不同的方式使用)。
在head元素内的script标签内,尝试创建两个称为初始化和消息的函数:
function initialization()
{
element = document.getElementById('help_submit');
element.addEventListener( 'click', message, false );
}
function message()
{
window.alert("You clicked on the Submit Button on the Help Request form.");
}
在此脚本标记的末尾,请写下以下内容:
window.addEventListener( "load", initialization, false );