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而不是我Form的submit()javascript 方法。

邀请更正。

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