Mysterious Changing Javascript Variable - php

Question

I have the following hunk of JS where I define var i with some PHP.
<script type="text/javascript">
var i = <?php echo $photo_count; ?>;
function updatePreview(){
var x = document.getElementById('preimage').value;
var y = document.getElementById('precapt').value;
var preview = "";
var special = document.getElementById('special').value;
i++;
preview += "<div id='smallbox"+i+"' class='smallbox'><table><tr><td rowspan='2'><img id='picture"+i+"' src='"+x+"' /><br /><input type='button' onclick='removeimg("+i+");' value='delete' /></td><td>URL: <input onchange='updateimg("+i+");' type='text' id='image"+i+"' value='"+x+"'/></td></tr><tr><td>Caption: <input type='text' id='capt"+i+"' value='"+y+"'/></td></tr></table></div><hr />";
//window.alert(preview);
//document.getElementById('special').value += "#"+x+"|"+y;
document.getElementById('preview').innerHTML += preview;
document.getElementById('preimage').value = "";
document.getElementById('precapt').value = "";
//window.alert(document.getElementById('special').value);
}
function showSubmit(){
window.alert("i = "+i);
document.getElementById('hideImg').style.display = "none";
document.getElementById('hideTags').style.display = "block";
while(i>1){
var img = document.getElementById("image"+i).value;
var capt = document.getElementById("capt"+i).value;
if(img.length>3){
document.getElementById('special').value += "#"+img+"|"+capt;
window.alert(document.getElementById('special').value);
window.alert("i = "+i);
document.getElementById('preview2').innerHTML += "<img class='postpreviewimg' src='"+img+"' />";
}
i--;
}
document.getElementById('preview').style.display = "none";
}
</script>
In the page's source I can see that PHP is defining i correctly but in the first line of showSubmit() where I alert(i) it shows i's value to be 1, unless updatePreview() is called first.
In other words.. if the pages source looks like this: var i = 36; and then I call the function showSubmit() it alerts i = 1 when it should alert i = 36
Each time updatePreview() is called i will increment from 1, instead of from 36.
Am I defining i incorrectly? Isn't that the proper way to set a global variable?

Answer 1

You are defining i as a global variable. So every script on the page that uses something like i=10 will change this value.
And since i is a common used variable counter name its very likely there is a script that changes it. If you use var MyPhotoCount = <?php echo $photo_count; ?>; as name its more likely to work.
Even if this other script is included before or after this script it could cause problems. The other script could be using an on ready function or any other delay that is triggered before you call ShowSubmit();
Global variables should always be unique. And you also just found the reason why its never a good idea to use them. You cannot trust their value.
UPDATE:
You are including nicEdit.js on your page and that script contains the following code (line 185 in full source):
domLoaded : function() {
if (arguments.callee.done) return;
arguments.callee.done = true;
for (i = 0;i < bkLib.domLoad.length;i++) bkLib.domLoad[i]();
},
Your i variable is changed there.