Javascript string syntax and for loop logic

Question

So i am learning how to perform loops with javascript, and was researching how to do it with an array. I understand how to create arrays, but what i am not clear on is using implementing that in the loop. So i cam across examples that kind of "manufacture an array within the loop" as i think i have done in this case.

What i want to do is use javascript to change the classes of different dom elements on a page. What i don't want to do is repeat the same code over and over again with a different numerical value. I thought i had everything right but apparently i don't. Here is my code:

<script>
for (var i = 0; i < 11; i++) {
    var storyImageSubmit + [i] = document.getElementById('story_image_' + [i]);
    var realImageUpload + [i] = document.getElementById('realImageUpload' + [i]);

    realImageUpload + [i].addEventListener('mouseover', over_profile_image_submit_ + [i], false);
    realImageUpload + [i].addEventListener('mouseout', out_profile_image_submit_ + [i], false);
    realImageUpload + [i].addEventListener('mousedown', down_profile_image_submit_ + [i], false);
    realImageUpload + [i].addEventListener('mouseup', up_profile_image_submit_ + [i], false);

    function over_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmitHover"; 
    }
    function out_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmit"; 
    }
    function down_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmitDown"; 
    }
    function up_profile_image_submit_ + [i] + () {
        storyImageSubmit + [i].className = "accountSettingsBrowseSubmit"; 
    }
}
</script>

What i want the code to look like, but iterated with the different numerical values of 1-10, is this:

<script>
for (var i = 0; i < 11; i++) {
    var storyImageSubmit1 = document.getElementById('story_image_1');
    var realImageUpload1 = document.getElementById('realImageUpload1']);

    realImageUpload1.addEventListener('mouseover', over_profile_image_submit_1, false);
    realImageUpload1.addEventListener('mouseout', out_profile_image_submit_1, false);
    realImageUpload1.addEventListener('mousedown', down_profile_image_submit_1, false);
    realImageUpload1.addEventListener('mouseup', up_profile_image_submit_1, false);

    function over_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmitHover"; 
    }
    function out_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmit"; 
    }
    function down_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmitDown"; 
    }
    function up_profile_image_submit_1() {
        storyImageSubmit1.className = "accountSettingsBrowseSubmit"; 
    }
}
</script

what am i doing wrong here?

<----------------------UPDATE:----------------------->

this is my code presently, after determining that i need an array to accomplish what i want to do. I tested my loop of my array variable, and everything in that department seems to be working fine.

The next issue i have run into now is getting javascript not to rewrite over my listening variables defined by each iteration. I decided the best way to do that would be to eliminate any variables in the loop so that each listening and function execution is unique. I am doing that with the assumption that rewriting my variables is why it wont work. but even after doing that, it won't work.

<script>
var storyImageValue = ["1","2","3","4","5","6","7","8","9","10"];
for (var i = 0; i < storyImageValue.length; i++) {
    document.getElementById('realImageUpload' + storyImageValue[i]).addEventListener('mouseover', function () { document.getElementById('storyImageSubmit' + storyImageValue[i]).className = "accountSettingsBrowseSubmitHover"; }, false);
}

Thoughts?

Answer 1

If you have an array in JavaScript, this is how you can iterate it with a for-loop construct:

var arr = [1, 2, 3], i, element;
for (i = 0; i < arr.length; ++i) {
    element = arr[i];
    // Now do whatever you want with element within this loop.
}

---

Update as per your comment:

What's happening in the code you have in the comment is that the variable i is not being scoped properly for your purposes. Thing is, in JavaScript, there's no block scope, only function scope...

This means that whenever your event listener function is being invoked, it's getting the value of i but that value is always going to be the last value that was used in the loop..in this case, 10.

Try it like this:

var storyImageValue = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];

for (var i = 0; i < storyImageValue.length; i++) {
  (function (index) {
    document.getElementById('realImageUpload' + storyImageValue[index]).addEventListener('mouseover', function () {
        document.getElementById('storyImageSubmit' + storyImageValue[index]).className = "accountSettingsBrowseSubmitHover";
    }, false);
  }(i));
}

What I'm doing is I'm creating a function that takes a single argument (representing the loop index in our case) which invokes itself immediately after being declared, passing in the current value of the loop counter i.

This is because of what I mentioned before as regards scoping. Since JavaScript does not support block scoping, but only function scoping, creating a function which immediately invokes itself will create the scope you need to store the loop counter so that once your event listener function is executed, it will access the correct value.

Answer 2

In JQuery you can use below syntax for parsing javascript array :

$.each(curVal, function(i, array){

alert (curVal);
});

Answer 3

Try something like this:

for (var i = 1; i <= 10; i++) {
    var storyImage = document.getElementById('story_image_' + i);
    var realImage = document.getElementById('realImageUpload' + i);

    realImage.addEventListener('mouseover', function () { storyImage.className = "..."; }, false);
    ...
}