提交按钮上的Java语言

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加载之前就运行Java document.getElementById('help_submit') ，因此document.getElementById('help_submit')找不到DOM元素，因为它尚未在页面中。 您可以通过将包含此代码的脚本移到</body>标记之前的位置来解决此问题，以便在脚本运行时所有DOM元素都存在。 有关此问题的更多详细信息，请参考以下答案： 纯JavaScript等效于jQuery的$ .ready（）如何在页面/ dom准备就绪时调用函数 。

另外，您的提交处理代码需要防止“提交”按钮的默认操作，否则表单仍然会提交。 但是，如果您不希望提交表单，则应该停止使用“提交”按钮，而使用常规按钮。

除了将脚本移到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方面的经验，但是在给出注释和答案后，请尝试通过以下方式更改代码：

1. 删除给定的代码（在以后的步骤中将以不同的方式使用它）。

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

3. 在此脚本标签的末尾，编写以下内容：

    window.addEventListener( "load", initialization, false );