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 mentioned或可能由其他问题引起。

编辑：从你对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失败的原因（虽然函数与按钮元素的名称明显不同肯定是一个好习惯;个人，我用'btn _'）为我的所有按钮ID加上前缀。

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

关于方法3：

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

Answer 3

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

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

是否会重新加载您的页面 - 因此控制台输出“消失”？

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

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

Answer 4

我的与我有些不同，尽管我从@TheBrain的答案中获得了帮助。我的javascript方法的名称为submit()，它实际上是在提交我的表单。当我将方法名称更改为submitForm()时，它起作用了。

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

已更正。

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

4 个答案:

关于方法1：

关于方法2：

关于方法3：