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

Question

我正在尝试做一些非常简单的事情 - 单击按钮时调用一个函数。我已经在网上查看了几个示例，例如 W3Schools 并且(我相信)我正确使用了 onclick/onClick 它似乎无法正常工作。我尝试了几种不同的方法 - 我真的不确定我做错了什么。

方法一

HTML

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

JavaScript

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

结果:

Test

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

方法二

HTML

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

JavaScript

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

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

结果

Test

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

方法三

HTML

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

JavaScript

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

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

结果

Test

这会出现在控制台日志中并保留在那里，而无需单击按钮。

问题

我通常感到困惑。据我所知，我正在做示例建议的事情(我尝试过的不同方法反射(reflect)了示例中的差异)。

谢谢。

编辑

所以问题似乎是 console.log 的闪烁速度比我看到的快得多...有人知道为什么会这样吗？好像页面正在刷新自己，但我不知道为什么会这样......

回答

该按钮的形式在单击时会导致页面刷新。

Answer 1

问题出在函数的名称上。它与元素的 id 相同。做一个测试，尝试编写这个 console.log(add)。您将看到它记录 DOM 节点而不是函数。

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