How can I pass a javascript array to onclick=“('here')”?

Question

I have a program that requires I continuously send the array back and forth from the screen to the server. The array is important, so I need it.

So it starts as a php array in an onclick -> it goes to javascript and calls the php function again which then returns it back to the javascript function. This is where I'm lost. After the php array is returned, I'm trying to put it back into the onclick so that when the user clicks again, the new array is send with the onclick.

How can I go about doing this?

What i have so far:

Within the javascript, after a success message is received and the PHP function delivers the new array I have something like this set up where msg is holding the values. msg.question_id is holding just an integer, msg.array is holding a php array.

document.getElementById('buttons').innerHTML ="<a href='javascript:void(0)' onclick=\"movie_guess('yes',"+msg.question_id+","+msg.array+")\"><img  src=\"/assets/yes.png\" ></a><a href=\"javascript:void(0)\" onclick=\"movie_guess('no',"+msg.question_id+","+msg.array+")\"><img  src=\"/assets/no.png\" ></a> ";

Answer 1

Well I guess you should not return PHP array in ajax response. You can send it as a string with a delimiter. On successful response you can then split those and create a javascript array. You can also using JSON. Encode it to access it.

$phpArr=( 0 => 'Zero', 1 => 'One', 2 => 'Two'); // PHP Code
var jsArr= <?php echo json_encode($phpArr); ?>; // Javascript Code
for($i=0;<stop-condition>;$i++){      alert(jsArr[i]);  } // Javascript Code

Answer 2

This is the element you're trying to add, properly indented:

<a href='javascript:void(0)' onclick=\"movie_guess('yes',"+msg.question_id+","+msg.array+")\">
  <img  src=\"/assets/yes.png\" >
</a>
<a href=\"javascript:void(0)\" onclick=\"movie_guess('no',"+msg.question_id+","+msg.array+")\">
  <img  src=\"/assets/no.png\" >
</a>

Instead, you could add it without the handlers (I have also used # as the link target; also note how I avoided the need to escape quotes and how you can split long strings to several lines):

var buttons = document.getElementById('buttons');
buttons.innerHTML = 
  '<a href="#"><img src="/assets/yes.png"></a>'+
  '<a href="#"><img src="/assets/no.png"></a>'

then add the event handlers as functions. This improves performance and lets you pass anything present visible from the current scope (I'm assuming msg is a javascript object and that it doesn't change). addEventListener has other benefits over onclick=function(){...} as well:

var links = buttons.getElementsByTagName("a");
links[0].addEventListener("click", function(){
  movie_guess('yes', mgs.question_id, msg.array);
});
links[1].addEventListener("click", function(){
  movie_guess('no', mgs.question_id, msg.array);
});

---

A longer but faster version would be to not touch innerHTML at all, and manipulate the DOM instead:

var buttons = document.getElementById('buttons');
var aYes = document.createElement("a");
aYes.href = "#";
aYes.addEventListener(...);
var imgYes = document.createElement("img");
imgYes.src = "/assets/yes.png";
aYes.appendChild(imgYes);
buttons.appendChild(aYes);
var aNo = document.createElement("a");
...