是否可以从onClick向javascript函数传递数组?

nfs0ujit  于 2023-01-01  发布在  Java
关注(0)|答案(2)|浏览(227)

在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"))">

这能用一种简单的方法来完成吗?

n6lpvg4x

n6lpvg4x1#

是的,这是可能的,你可能想使用数组初始化语法(也就是“数组文字”),并且你需要注意你的引号:

<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"]);
    }
});
hjqgdpho

hjqgdpho2#

这里有两个问题。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'])">

我还建议避免使用T.J. Crowder提到的内联JS

相关问题