onClick/onClick在HTML5/JavaScript中似乎并没有像预期的那样工作

我正在尝试做一件非常简单的事情——单击按钮时调用函数。我在网上看过几个例子，比如W3Schools，我认为我正确地使用了onclick/onclick，但它似乎无法正常工作。我尝试过几种不同的方法——我真的不确定我做错了什么

方法1

HTML

结果:

试验

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

方法2

HTML

结果

试验

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

方法3

HTML

结果

试验

这将出现在控制台日志中，并保留在那里，而没有单击按钮

问题

我总觉得很困惑。从我所能说的，我正在做例子所建议的事情（我尝试的不同方法反映了例子中的差异）

谢谢

编辑

所以问题似乎是console.log的闪烁速度比我看到的要快。。。有人知道为什么会这样吗？这似乎是网页刷新本身，但我不知道为什么这将是

回答

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

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

这是可疑的–在没有用户交互的情况下，通常不会清除控制台输出

是否您的页面刚刚被重新加载，因此控制台输出“消失”

---

一般来说，无论如何，您都不应该再使用这种“老派”事件处理（除非是用于真正小规模的事件）

---

看看像jQuery之类的Popullar JS库——它们简化了很多事件处理（除其他外）。

问题在于函数的名称。它与元素的id相同。进行测试并尝试编写此

console.log（add）

。您将看到它记录DOM节点，而不是函数

---

你的按钮在表格里吗？因为如果是这样，那么表单就提交了，这就是页面刷新的原因。您可以在测试中发布JSFIDLE吗？

关于方法1： 我需要更多地了解html结构才能确定，但在方法1中，函数的声明方式不符合范围。这可能与名称相同有关，也可能是由其他问题引起的

编辑：从你对大脑的反应来看，如果你使用不同的名字，听起来你可以让方法1起作用。有鉴于此，您还可以通过更改onclick以包含返回false值来防止页面发布。以下任一项均有效：

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

添加

或

添加

加上添加了

返回false

作为

add（）

函数代码的最后一行

关于方法2： 在任何一种情况下，方法2都是实现这一点的更好方法，因此我们可以忽略方法1失败背后的原因（尽管函数和按钮元素的名称明显不同肯定是一种好的做法；我个人在我所有的按钮ID前面加上“btn”）

在这两种方法中超级快速清除控制台的可能原因是您没有为按钮声明

类型。在没有类型的情况下，不同的浏览器会做不同的事情（请参阅上的提示），听起来您的浏览器将其视为提交按钮，这意味着它在单击时会发回页面。您应该能够通过在按钮元素的属性中指定
type='button'
来防止这种行为

关于方法3：
最后，方法3提供了一种行为，这是因为您的赋值语句也在执行对
add（）
函数的调用。
我的有点不同，尽管我从@TheBrain的答案中得到了帮助。我的javascript方法的名称是
submit（）
，它实际上是在提交我的表单。当我将方法的名称更改为
submitForm（）
时，它起了作用

我认为前面的
submit（）
是在内部调用Javascript
Form
的
submit（）
而不是我的Javascript方法

请更正。
实际上，方法1很好用。在Chrome和IE中，方法3都是错误的。尝试使用
add（）
对
onclick
进行asign实际上会执行
add
函数，并使用
onclick
返回的任何内容分配
onclick
，因此，没有任何内容。虽然这可能是@Sho，但盗用名称是一种不好的做法。您的按钮是否处于表单中？因为如果是这样，那么表单就提交了，这就是页面刷新的原因。你能在测试中发布一个JSFIDLE吗？哦，天哪，这就是为什么。。。非常感谢。请你把这个作为答案，这样我就可以选择了。谢谢是的，通过对DOM元素的onclick函数的字面引用，引擎不再混乱，而在第一个示例中，命名中存在歧义。好电话。解决了一个更深层次的问题，即一致的命名实践。我更改了函数的名称。我仍然有一个问题，即“Test”出现在控制台日志中，并且消失的速度几乎比我看到的要快。
function add() {
    console.log("Test"); 
} 

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

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

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

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

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

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

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

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