pass an array using onClick in js

Question

So I have this code below. Whenever I click the button, it goes to the render_initialize_board and console.logs only the first element of the array fixed. How to pass the whole array to the function using onclick in javascript?

function render_initialize_board(N,fixed){
     console.log(fixed);
}

 N = 4;
 var fixed = [0,1,0,0]

  $("#header ul").append('<li><a href="#'+N+'" data-toggle="tab" onclick="render_initial_board('+N+','+fixed+')">'+ N +'</a></li>');

Consider using event listeners instead of attaching event handlers through HTML. Something like $("#header ul").append(`<li><a href="#${N}" data-toggle="tab">${N}</a></li>`); $("#header ul a").on('"click", function (e) { render_initialize_board(N, [0,1,0,0]); });. It's hard to give a definitive answer since there is little context in the question. Providing a minimal reproducible example will go a long way in getting the best answer. — Heretic Monkey
– Heretic Monkey, Commented May 18, 2019 at 2:31
If you concat a string and a non-string, JavaScript will call the toString() method of the non-string. Therefore 'render_initial_board('+N+','+fixed+')' will be 'render_initial_board(4,0,1,0,0)' since arr.toString() is equivalent to arr.join(','). — R Xy
– R Xy, Commented May 18, 2019 at 2:40
Also, you wrote a function called render_initialize_board, but you called render_initial_board, which is not defined, in the onclick. — R Xy
– R Xy, Commented May 18, 2019 at 2:45
Just want to thank @HereticMonkey for giving me this insight. It actually solved my problem thank you! — devTrix
– devTrix, Commented May 20, 2019 at 14:02

Mark · Accepted Answer · 2019-05-18 02:39:24Z

1

You have a few too many quotes. With those quotes you are passing a string representation of the array to your function, which from its point of view looks like separate arguments for each element. You can just use:

onclick="render_initialize_board(N, fixed)"

function render_initialize_board(N, fixed, fixed2) {
  console.log(fixed);
}

N = 4;
var fixed = [9, 1, 0, 0]

$("#header ul").append('<li><a href="#' + N + '" data-toggle="tab" onclick="render_initialize_board(N, fixed)">' + N + '</a></li>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
  <ul>
    </ul>
</div>

answered May 18, 2019 at 2:39

Mark

92.6k8 gold badges116 silver badges156 bronze badges

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

Comments

Ezra · Accepted Answer · 2019-05-18 03:25:11Z

0

By concatenating those strings and variables, the fixed array is being converted to a string. Because of that, the function call looks like this when the click event is handled: render_initialize_board(4, 0, 1, 0, 0)

In that case, the fixed parameter does, in fact, equal 0.

To make it easier to read while avoiding the issue, just use jQuery's click method.

function render_initialize_board(N, fixed) {
  console.log(fixed);
}

var N = 4;
var fixed = [0, 1, 0, 0];

$("#header ul")
  .append('<li><a href="#' + N + '" data-toggle="tab">' + N + "</a></li>")
  .click(() => render_initialize_board(N, fixed)); // Replace "onclick" with this

edited May 18, 2019 at 3:25

answered May 18, 2019 at 3:18

Ezra

1,1889 silver badges13 bronze badges

Collectives™ on Stack Overflow

pass an array using onClick in js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related