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

Question

In PHP I can write a function like this:

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

Then I can call it like this (maybe ugly, but still works):

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

I want to do something similar with JavaScript but can't figure out if it's possible to pass arrays to functions like that. This is my psuedo-function:

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

I want to call it from a button using onClick like this:

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

Can this be accomplished in a simle way?

Just use the array literal, ["value1","value2"] – Zarathuztra Mar 10 '15 at 12:21 — Zarathuztra, Mar 10 '15 at 12:21

score 10 · Accepted Answer · edited May 23 '17 at 12:33

10

Yes, it's possible. You'd probably want to use array initializer syntax (aka an "array literal"), and you need to mind your quotes:

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

If your attribute value is quoted with double quotes, you can't use a literal double quote within the value. The easiest thing is to use single quotes, although since the text of attribute values is HTML text (something people tend to forget), you could use " if you liked. (I wouldn't. :-) ) And the fact that the text is HTML is something to keep in mind for the contents of the array...

It may well not be desirable, though. You might consider using modern event handling techniques to hook up the handler, for instance:

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

If you need to support old IE, use a DOM library like jQuery, or something like the hookEvent function in this other answer to handle the fact that IE8 and earlier don't have addEventListener.

edited May 23 '17 at 12:33

Community

1
1

answered Mar 10 '15 at 12:20

T.J. Crowder

959,406
173
1,780
1,769

1

I know it's not desirable but right now it just want something simple and basic... Thanks! – Torbjörn Loke Nornwen Mar 10 '15 at 12:54
@TorbjörnLokeNornwen: I said *"**may** not be"*. :-) Glad that helped! – T.J. Crowder Mar 10 '15 at 12:55
what if the array is a very long one represented by a variable? – Raymond Chen Mar 20 '19 at 20:20
@user7344209 - The size doesn't matter in that case, but the variable would need to be a global to be used in an `onClick` atttribute event handler (so you'd want to use the `addEventListener` version instead). – T.J. Crowder Mar 21 '19 at 06:57

score 5 · Answer 2 · edited May 23 '17 at 12:16

You have 2 problems. array should be Array, as JS is case-sensitive. You could also use the short form [1,2,3]. Then notice that your onclick attribute is wrapped with double quotes. You need to escape the quotes inside your JS by doing \" or by simply using ':

function myFunction(arr){
  // for demo purposes
  alert( JSON.stringify(arr) );
}

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

I would also suggest avoiding inline JS as T.J. Crowder mentioned it.

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

2 Answers2