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吗？