Question

我试图在不使用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

编码在哪里出错了？

Answer 1

在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.");
});

工作演示：http://jsfiddle.net/jfriend00/vcjtv0kz/

Answer 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 );

提交按钮上不引人注目的Javascript

2 个答案: