3

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

方法一

HTML

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

JavaScript

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

结果:

测试

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

方法二

HTML

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

JavaScript

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

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

结果

测试

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

方法三

HTML

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

JavaScript

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

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

结果

测试

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

问题

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

谢谢。

编辑

所以看来问题是console.log闪烁的速度几乎比我看到的要快......有谁知道为什么会这样?页面似乎正在刷新,但我不知道为什么会这样......

回答

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

4

4 回答 4

8

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

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

于 2013-04-11T13:09:02.483 回答
1

关于方法一:

我需要看到更多的 html 结构才能确定,但​​听起来像在方法 1 中,函数没有以范围内的方式正确声明。这可能与名称相同有关,正如theBrain 提到的那样,或者它可能是由其他问题引起的。

编辑:从您对 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 失败背后的原因(尽管函数与按钮元素的名称明显不同肯定是一个好习惯;就我个人而言,我在前言我所有的按钮 id 都带有“btn_”)。

在这两种方法中超快速清除控制台的可能原因是您没有type为按钮声明。不同的浏览器在没有类型的情况下会做不同的事情(请参阅W3Schools 按钮标签上的提示),听起来您将其视为提交按钮,这意味着它在单击时返回到页面。您应该能够通过type='button'在按钮元素的属性中指定来防止这种行为。

关于方法3:

最后,方法 3 提供的行为是因为您的赋值语句也在执行对add()函数的调用。

于 2013-04-11T13:21:31.167 回答
0

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

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

会不会是您的页面刚刚重新加载——因此控制台输出“消失”了?


一般来说,你不应该再使用这种“老派”事件处理(除非它是针对非常小规模的事情)。

看看流行的 JS 库,比如 jQuery 等——它们在很多方面简化了事件处理(除其他外)。

于 2013-04-11T13:08:55.440 回答
0

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

我认为早些时候submit()是在内部调用 Javascript而不是我Formsubmit()javascript 方法。

邀请更正。

于 2019-08-21T08:26:43.637 回答