Mysterious Changing Javascript Variable

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?

Use console.log(i); throughout the script and have a closer look in the developer view in Google chrome. I am sure you will find what you are looking for :) — Jelmer
– Jelmer, Commented Dec 27, 2012 at 9:01
everything is ok wtih your code. I have tryed on my website i when I call first showSubmit(); it alerts me 36 — iWizard
– iWizard, Commented Dec 27, 2012 at 9:03
If you add showSubmit() just before </script> it would also alert the correct value. It changes in another script on the page. What else are you including? — Hugo Delsing
– Hugo Delsing, Commented Dec 27, 2012 at 9:07

Hugo Delsing · Accepted Answer · 2012-12-27 09:32:21Z

4

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.

edited Dec 27, 2012 at 9:32

answered Dec 27, 2012 at 9:01

Hugo Delsing

14.3k5 gold badges50 silver badges76 bronze badges

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

3 Comments

iWizard Over a year ago

So solution is to change variable nname from "i" to "myCustomI" :)

Hugo Delsing Over a year ago

or MyPhotoCount or even change nicEdit.js to use for (var i = ... as it should

I wrestled a bear once. Over a year ago

whaaa... i have that script on the original, working version of the one i'm editing now and it is not affecting it there... thanks for pointing that out +1

Collectives™ on Stack Overflow

Mysterious Changing Javascript Variable

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related