Javascript argument in function

Question

I'm having trouble passing an array as an argument of a function:

function test() {
   var array1 = ["1","2"];
   var show = "<p>Show: <a href=# onClick='showArray("+array1+")'>Click to show array</a></p>";
}

So I need to have an onClick as it is there, but when I pass an array and call the function

function showArray(array) { alert (array.length); }

Returns nothing. Why not work?

EDIT:

function test() {
    var array1 = [];
    array1[0] = {
        "type" : 0, 
        "message" : "example", 
        "from" : "path1",
        "count" : 1,
        "isChecked": false
    };
    array1[1] = {
        "type" : 2, 
        "message" : "example", 
        "from" : "path2",
        "count" : 50,
        "isChecked": false
    };

   var show = "<p>Show: <a href=# onClick='showArray(["+array1+"])'>Click to show array</a></p>";
}

Do you want the click event to call showArray(array1) such that the function uses the contents of the array1 variable at the time the event occurs? Or do you want the click event to call showArray(["1","2"]) such that the function uses the array values as they were at the time the element was created (ignoring any changes to the array1 variable that may have happened since)? — nnnnnn
– nnnnnn, Commented Jul 5, 2012 at 22:54

Danilo Valente · Accepted Answer · 2012-07-05 22:53:56Z

2

Your code is not working because the evaluated value of the show var is the following:

"<p>Show: <a href=# onClick='showArray(\"1\",\"2\")'>Click to show array</a></p>"

Which means that the showArray function is receiving two parameters ("1" and "2") and neither of them is an array, but a string.

To make your code work, use this:

var show = "<p>Show: <a href=# onClick='showArray(["+array1+"])'>Click to show array</a></p>"

By this way, the evaluated value will be:

"<p>Show: <a href=# onClick='showArray([\"1\",\"2\"])'>Click to show array</a></p>"

Which means that showArray will receive only one parameter: the ["1","2"] array

edited Jul 5, 2012 at 22:53

answered Jul 5, 2012 at 22:47

Danilo Valente

11.4k8 gold badges55 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

willvv Over a year ago

Actually besides that problem, he is calling the method showArray, and the function is being declared as show.

Joseph Met Over a year ago

That's interessing. But if I have "var array1 = []; array1[0] = { "type" : 0 }; array1[1] = { "type" : 2 };" the code does not work. Why?

Danilo Valente Over a year ago

Well, please post the code you're now trying to use and then I'll answer your question

Joseph Met Over a year ago

See my changes in the main post. That structure is that I get to the array. And thank you!

Joseph Met Over a year ago

Can you show the jsFiddle please? There is no error, it does not alert to the size of the array.

|

Nadav S. · Accepted Answer · 2012-07-05 22:56:11Z

1

Everyone is missing it:

var show = "<p>Show: <a href='javascript:showArray(array1)'>Click to show array</a></p>"

You have to take out the quotes if you use a variable.
The "href" attribute didn't contain quotes.
It is recommended to use href="javascript:" instead of onclick

edited Jul 5, 2012 at 22:56

answered Jul 5, 2012 at 22:50

Nadav S.

2,4593 gold badges25 silver badges39 bronze badges

9 Comments

nnnnnn Over a year ago

'It is recommended to use href="javascript:" instead of onclick' - recommended by whom? The usual recommendation is the opposite.

Nadav S. Over a year ago

You know what? Maybe. But every link must contain the href attribute, so why add onclick and put # in href? You can do everything in one place.

Joseph Met Over a year ago

Yes I forgot to write. I'm trying to test your solutions.

nnnnnn Over a year ago

Either way will work. I prefer to set the href to an actual valid url so that for users with JS disabled they still get some functionality (even if the url just takes them to an error page that says "Please enable JavaScript to use this site.").

Nadav S. Over a year ago

@nnnnnn that's interesting. I will think about it in the future. But think about what will happen when users click a link that doesn't function at all.

|

Lee Taylor · Accepted Answer · 2012-07-05 22:48:44Z

0

Take out the quotes:

var show = "<p>Show: <a href=# onClick='showArray(array1)'>Click to show array</a></p>";

answered Jul 5, 2012 at 22:48

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

Comments

mohamed elbou · Accepted Answer · 2012-07-05 22:55:13Z

0

try this:

<script>
var array1 = ["1","2"];
function showArray(myArray) { alert (myArray.length); } 
</script>
<p>Show: <a href='#' onClick='showArray(array1); return false;'>Click to show array</a></p>

and here is a link to this example: http://jsfiddle.net/eNXx5/

answered Jul 5, 2012 at 22:55

mohamed elbou

1,8571 gold badge18 silver badges21 bronze badges

Comments

sachleen · Accepted Answer · 2012-07-05 22:56:05Z

0

Your onclick calls showArray but your function is called show.

If you inspect the DOM, you'll see what the JS is creating:

<a href="#" onclick="showArray(1,2)">Click to show array</a>

That's not valid! So just change it to

<a href='#' onClick='showArray(array1)'>

and the DOM will be exactly that, as well. This is valid.

DEMO

answered Jul 5, 2012 at 22:56

sachleen

31.2k8 gold badges81 silver badges75 bronze badges

Collectives™ on Stack Overflow

Javascript argument in function

5 Answers 5

6 Comments

9 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

9 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related