onClick / onclick似乎在HTML5 / JavaScript中没有按预期工作

Question

我正在尝试做一些非常简单的事情 - 单击一个按钮时调用一个函数。 我在网上看过几个例子，比如W3Schools和（我相信）我正在使用onclick / onClick，它似乎没有正常运行。 我尝试了几种不同的方法 - 我真的不确定我做错了什么。

方法1

HTML

<button id="buttonAdd" onclick="add()">Add</button> 

JavaScript的

function add() {
    console.log("Test"); 
} 

结果：

测试

单击该按钮时，它在console.log中闪烁的速度比我容易看到的速度快，然后消失。

方法2

HTML

<button id="add">Add</button>

JavaScript的

window.onload = function() {
    document.getElementById("add").onclick = add; 
} 

function add() {
    console.log("Test"); 
} 

结果

测试

单击该按钮时，它在console.log中闪烁的速度比我容易看到的速度快，然后消失。

方法3

HTML

<button id="add">Add</button>

JavaScript的

window.onload = function() {
    document.getElementById("add").onclick = add(); 
} 

function add() {
    console.log("Test"); 
} 

结果

测试

这将出现在控制台日志中并保持不变，没有单击该按钮。

问题

我一般都感到困惑。 据我所知，我正在做的例子（我尝试过的不同方法反映了例子中的差异）。

谢谢。

编辑

所以似乎问题是console.log闪烁的速度几乎比我看到的要快......有没有人知道为什么会这样？ 看起来页面本身就令人耳目一新，但我不知道为什么会这样......

回答

该按钮的形式使页面在单击时刷新。

Answer 1

问题是你的功能名称。 它与元素的id相同。 尝试编写这个console.log(add) 。 您将看到它记录DOM节点而不是函数。

是表单中的按钮？ 因为如果是这样，那么表单就会被提交，这就是页面刷新的原因。 你可以在测试中发布一个jsfiddle吗？

Answer 2

关于方法1：

我需要更多地看一下你的html结构，但是听起来好像在方法1中，函数没有以范围内的方式正确声明。 这可能与名称相同，如布莱恩所提到的，或者可能是由其他一些问题引起的。

编辑：从您对theBrain的回复中，如果您使用不同的名称，听起来您可以让方法1工作。 鉴于此，您还可以通过更改onclick来阻止页面发布，以包含返回false值。 以下任何一种都可以使用：

<button id="buttonAdd" onclick="add(); return false;">Add</button>

要么

<button id="buttonAdd" onclick="return add();">Add</button>

再加上return false; 作为add()函数代码的最后一行。

关于方法2：

在任何一种情况下，方法2都是实现这一点的更好方法，因此我们可以忽略方法1失败的原因（虽然函数与按钮元素的名称明显不同，肯定是一个好习惯;个人而言，我的前言所有我的按钮ID都带有'btn_'）。

在两种方法中超级快速清除控制台的可能原因是您没有为按钮声明type 。 在没有类型的情况下，不同的浏览器会以不同的方式执行操作（请参阅W3Schools按钮标记上的提示），这听起来像是您将其视为提交按钮，这意味着它在单击时会回发到页面。 您应该能够通过在button元素的属性中指定type='button'来防止此行为。

关于方法3：

最后，方法3提供了它的行为，因为你的赋值语句也在执行对add()函数的调用。

Answer 3

单击该按钮时，它在console.log中闪烁的速度比我容易看到的速度快，然后消失。

这是可疑的 - 如果没有用户交互，通常不会清除控制台输出。

可能是你的页面被重新加载 - 因此控制台输出“消失”了吗？

---

一般来说，你不应该再使用这种“老派”事件处理（除非它是针对非常小规模的事情）。

看看像jQuery等的popuplar JS库 - 它们简化了事件处理（以及其他事情）。

Answer 4

虽然我从@TheBrain的回答中得到了帮助，但我有点不同。 我的javascript方法的名称是submit() ，它实际上是在提交我的表单。 当我将方法的名称更改为submitForm() ，它工作。

我认为之前的submit()是内部调用Javascript Form的submit()而不是我的javascript方法。

更正邀请。