Question

我正在使用Javascript在网页上创建一些简单的按钮，并且在点击它们时需要调用一个函数。我已经提出了以下基于搜索答案的示例。但是，创建一个函数只是为了调用一个函数似乎是错误的。我无法成功直接调用该功能＆＃34; click_button＆＃34;其他任何方式都在剧本的其他地方。

这有效：

my_button.onclick = function (){
    click_button(my_button.value);
    }

这些不能工作：

// This executes on first run, but not when clicked.
my_button.onclick = click_button(my_button.value);
// This doesn't do anything when clicked.
my_button.onclick = "click_button(my_button.value);";

顶部示例是通过JavaScript中的按钮单击调用函数的正确方法吗？

感谢您的帮助。

Answer 1

在第一个示例中，您为单击按钮时应调用的函数分配引用。这是正确的。

在第二个示例中，将click_button函数的结果分配给onclick。因此，当引擎读取您的代码时，它会执行您的click_button函数并将结果值分配给onclick。因此，当您单击按钮时，无法执行任何功能，只需执行一个值。

在第三个示例中，您只需为onclick指定一个字符串。这不起作用。

所以是的，第一种方式是正确的方法。

Answer 2

首先让我解释为什么你的最后两个例子不工作：

my_button.onclick = click_button(my_button.value);

这将立即执行click_button()函数，并将函数返回的任何内容分配给my_button.onclick

my_button.onclick = "click_button(my_button.value);";

这只是将my_button.onclick的值设置为字符串。按钮的onclick属性不期望内部包含javascript代码的字符串，并且不会以这种方式对其进行评估。

您可以在此处查看onclick属性的工作原理： https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick

分配给onclick的功能将通过MouseEvent传递。您的click_button函数会将值作为参数，因此您现在不能简单地将函数本身分配给onclick，如下所示：

my_button.onclick = click_button // won't be given my_button.value

因为传递给的值将是MouseEvent，而不是您所期望的。

如果您修改click_button函数以不需要value参数，那么您可以执行以下操作：

function click_button () {
    // Do stuff using this.value or my_button.value directly
}

my_button.onclick = click_button

否则，如果您希望能够将my_button.value传递给该函数，则需要将其包装在另一个函数中，就像在第一个示例中正确执行一样。

正如@Mikey在评论中指出的那样，您可以通过在函数内使用this.value来获取值。 MDN文档声明this将被设置为函数中的元素。

从JavaScript创建的按钮执行函数的正确方法？

2 个答案: