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

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

javascript html button

从JavaScript创建的按钮执行函数的正确方法？,javascript,html,button,Javascript,Html,Button,我正在使用Javascript在网页上创建一些简单的按钮，单击这些按钮时需要调用一个函数。我提出了以下基于搜索答案的示例。然而，仅仅为了调用函数而创建函数似乎是错误的。我无法成功地直接调用脚本中其他地方的函数“click_button” 这项工作： my_button.onclick = function (){ click_button(my_button.value); } 这些不起作用： // This executes on first run, but not whe

我正在使用Javascript在网页上创建一些简单的按钮，单击这些按钮时需要调用一个函数。我提出了以下基于搜索答案的示例。然而，仅仅为了调用函数而创建函数似乎是错误的。我无法成功地直接调用脚本中其他地方的函数“click_button”

这项工作：

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中，上面的示例是通过单击按钮调用函数的正确方法吗

感谢您的帮助。

让我首先解释一下为什么您的最后两个示例不起作用：

my_button.onclick = click_button(my_button.value);

这将立即执行

click_button（）

函数，并将函数返回的任何内容分配给

my_按钮。onclick

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

这只是将

my_button.onclick

的值设置为字符串。按钮的onclick属性不需要包含javascript代码的字符串，并且不会以这种方式对其求值

您可以在此处查看

onclick

属性的工作原理：

分配给

onclick

的函数将被传递一个消息。您的

click_按钮

函数将一个值作为参数，因此现在您不能简单地将函数本身分配给

onclick

，如下所示：

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

因为传递给be的值将是一个

MouseEvent

，而不是您期望的值

如果修改

单击按钮

功能以不需要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文档声明，

此

将被设置为函数中的元素。

首先让我解释一下为什么最后两个示例不起作用：

my_button.onclick = click_button(my_button.value);