Making 'onClick' on php page using javascript switch to random url within a php array

Question

Here's how I want it to work: If you click on image1, image2 will change to a random url within my array. If you were to click on image2, then it would change image1.

Here is my current code:

<img alt="" src="<?php echo $new_array[mt_rand(1, 53)]['var']; ?>"     style="height: 276px; width: 200px" id="imgClickAndChange1"       onclick="changeImage2()" />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<img alt="" src="<?php echo $new_array[mt_rand(1, 53)]['var']; ?>"      style="height: 276px; width: 200px" id="imgClickAndChange2"    onclick="changeImage1()" />
<script language="javascript">

function changeImage1() {
    var image = document.getElementById('imgClickAndChange1');
    image.src = "<?php echo $new_array[mt_rand(1, 53)]['var']; ?>";
}

function changeImage2() {
    var image = document.getElementById('imgClickAndChange2');
    image.src = "<?php echo $new_array[mt_rand(1, 53)]['var']; ?>";
}

</script>

Here is what actually happens: When I click image1, image2 will change. BUT if I click image1 again nothing will happen. (Same with image2) I'm wanting the image to keep changing to another random image every time I click it.

---Edit

Array Structure:

INT id; (1-52)
CHARVAR var; (contains htmls)
INT abc1; 
INT abc2;
INT abc3;

Snippet of print_r on array:

Array ( [1] => Array ( [0] => 1 [id] => 1 [1] => http://www.blahblah.com/2172.jpeg [var] => http://www.blahblah.com/2172.jpeg [2] => 0 [abc1] => 0 [3] => 0 [abc2] => 0 [4] => 0 [abc3] => 0 ) [2] => Array ( [0] => 2 [id] => 2 [1] => http://www.blahblah.com/2158.jpeg [var] => http://www.blahblah.com/2158.jpeg [2] => 0 [abc1] => 0 [3] => 0 [abc2] => 0 [4] => 0 [abc3] => 0 )

Answer 1

If you check your source code you'll see that inside your click events the image src generated by php is a string. It doesn't changes, no matter how many times you click it.

So what I suggest it to print your php array to a javascript array, and manage it with javascript random number.

Then once you have the array available in your javascript code, just use Math.random():

var imageList; // Consider this your javascript array with the image urls generated by php

// This function returns a random number based on the list length
function getRndNum() {
    return Math.floor(Math.random() * (0 - imageList.length)) + imageList.length;
}

function changeImage1() {
    var image = document.getElementById('imgClickAndChange1');

    // Below we get a random number and use it as the key for the image list array
    image.src = imageList[getRndNum()];
}

Fiddle

To print your php array:

var $jsArray = "[";

foreach ($array as $key => $value) {
    $jsArray.= "'" . $value['var'] . "',";
}

echo "var imageList = " . substr($jsArray, 0, -1) . "];";

The result should be something like:

var imageList = ['http://www.blahblah.com/2172.jpeg', 'http://www.blahblah.com/2172.jpeg'];