How to Increment variable in html / php - php

Question

I want to increment variable in html .. the variable is declared in php and I need to increment it in php ... I write the code bellow :
global $indice_array_contact;
$indice_array_contact=0;
<img src="images/back1.png" onclick='left_clik()'>
<img src="images/back2.png" onclick='right_clik()'>
<SCRIPT LANGUAGE="JavaScript">
<?php $indice_array_contact=$indice_array_contact+1; ?>
function left_clik()
{ document.getElementById("im1").src = "profiles_stored/executive.png";
document.getElementById("td1").innerHTML = "<?php echo $indice_array_contact ?>";
<?php $indice_array_contact=$indice_array_contact+1; ?>
}
function right_clik()
{ document.getElementById("im1").src = "profiles_stored/<?php echo $array_contact[0]->profile ?>";
document.getElementById("td1").innerHTML = "<?php echo $indice_array_contact ?>";
<?php $indice_array_contact=$indice_array_contact+1; ?>
}
When I click on the right_click button , the value is 1 ,and when I click on the left_click button , the value is 2 ... but if I click second time on right_click button the value doesn't change to 3. Why?

Answer 1

Your code will never work the way you want it - you are mixing server-side scripting ( php ) with client-side scripting ( javascript ).
What really happens in your example:
Your $indice_array_contact is incremented by one during page load on the server
Your function left_click() and right_click() receive the value of ( presumably ) 2 in the document.getElementById().innerHTML during page load, as calculated on the server -> this will never change on your already loaded page!
You hit a button and trigger either the left_click() or right_click() function -> the innerHTML DOM property receives value of 2, as the server calculated during page load -> this happens each time you execute the function
Try to re-work your implementation with only javascript as it looks you are looking for something that should change without the page being reloaded.

Answer 2

PHP is not necessary for this is it? Shouldn't something like this work:
<img src="images/back1.png" onclick='left_clik()'>
<img src="images/back2.png" onclick='right_clik()'>
<SCRIPT type="text/javascript">
var indice_array_contact = 0
function left_clik()
{
document.getElementById("im1").src = "profiles_stored/executive.png";
document.getElementById("td1").innerHTML = indice_array_contact;
indice_array_contact++;
}
function right_clik()
{
document.getElementById("im1").src = "profiles_stored/executive.png";
document.getElementById("td1").innerHTML = indice_array_contact;
indice_array_contact++;
}