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

发布时间:2021-10-06 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了onClick / onclick似乎在HTML5 / JavaScript中没有按预期工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试做一些非常简单的事情 – 单击一个按钮时调用一个函数.我在网上看过几个例子,比如W3Schools和(我相信)我正在使用onclick / onClick,它似乎没有正常运行.我尝试了几种不同的方法 – 我真的不确定我做错了什么.

方法1

HTML

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

JavaScript的

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

结果:

Test

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

方法2

HTML

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

JavaScript的

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

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

结果

Test

单击该按钮时,然后消失.

方法3

HTML

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

JavaScript的

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

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

结果

Test

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

问题

我一般都感到困惑.据我所知,我正在做的例子(我尝试过的不同方法反映了例子中的差异).

谢谢.

编辑

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

回答

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

解决方法

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

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

总结


以上是前端之家为你收集整理的onClick / onclick似乎在HTML5 / JavaScript中没有按预期工作全部内容,希望文章能够帮你解决onClick / onclick似乎在HTML5 / JavaScript中没有按预期工作所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。