是否可以将数组从onClick传递到javascript函数

Is it possible to pass an array from onClick to javascript function?

本文关键字：javascript 函数 onClick 数组 是否      更新时间：2023-09-26

在PHP中，我可以编写这样的函数：

function myFunction(myArray)
{
    foreach(myArray)
    {
        // do stuff with array
    }
}

然后我可以这样称呼它（也许很丑，但仍然有效）：

myFunction(array("string1","string2"));

我想用JavaScript做类似的事情，但无法弄清楚是否可以将数组传递给这样的函数。这是我的伪函数：

function myFunction(myArray)
{
    for (index = 0; index < myArray.length; ++index)
    {
        // do stuff with array
    }
}

我想使用 onClick 从按钮调用它，如下所示：

<input type="button" value="myButton" onClick="return myFunction(array("string1","string2"))">

这可以通过简单的方式完成吗？

是的，这是可能的。您可能希望使用数组初始值设定项语法（也称为"数组文字"），并且需要注意引号：

<input type="button" value="myButton" onClick="return myFunction(['string1','string2'])">
如果属性值用双引号

引出，则不能在值中使用文字双引号。最简单的方法是使用单引号，尽管由于属性值的文本是HTML文本（人们往往会忘记），因此如果您愿意，可以使用&quot;。（我不会。文本是 HTML 的事实对于数组的内容来说是要记住的......

不过，这很可能是不可取的。您可以考虑使用现代事件处理技术来挂接处理程序，例如：

document.querySelector("input[type=button][value=myButton]").addEventListener("click", function() {
    myFunction(['string1','string2'])
}, false);

或者，如果您有多个：

const handler = () => {
    myFunction(["string1","string2"]);
};
for (const element of document.querySelectorAll("input[type=button][value=myButton]")) {
    element.addEventListener("click", handler, false);
}

在后一种情况下，如果所有元素都在某个容器中（最终它们都在某个容器中，即使容器只是document.body），您可能能够使用事件委托来挂接单个处理程序，然后查看事件是否通过相关元素传递：

theContainer.addEventListener("click", function(event) {
    const button = event.target.closest("input[type=button][value=myButton]");
    if (button && this.contains(button)) {
        myFunction(["string1","string2"]);
    }
});

你有 2 个问题。 array应该是Array的，因为JS区分大小写。您也可以使用简写形式 [1,2,3] .然后请注意，onclick属性用双引号括起来。您需要通过执行'"或简单地使用 ' 来转义 JS 中的引号：

function myFunction(arr){
  // for demo purposes
  alert( JSON.stringify(arr) );
}
<input type="button" value="myButton" onClick="return myFunction(['string1','string2'])">

我还建议避免内联JS，因为T.J. Crowder提到了它。

相关文章：