javascript. my for loop stops after one iteration when enclosed in a function

Question

here's my problem. When my code is embedded within an html page, between body tags, it executes as it's suppose to : displays 12 lines of text (for loop goes 12 times);

but, when I enclose the code in a function, import it from an external js file, and try to envoke it with an onclick or onsubmit event, it stops after the first iteration.

this is the code embedded in an html file:

var all_imgs = document.getElementsByTagName('img');

        for(var i=0; i<all_imgs.length; i++){

            var item = all_imgs[i].src;
            var item_limit = item.length-4;
            var item_limit2 = item.length-6;

            var selected = item.substring(item_limit, item_limit2);

            if (selected == 'on') {
                document.write('image ' + i + ' with url : ' + item + ' is ');
                document.write('chosen');
                document.write('<br>');
            }
            else {
                document.write('image ' + i + ' with url : ' + item + ' is ');
                document.write('not chosen');
                document.write('<br>');
            }

        }

and the output:

image 0 with url : www.../thumb2_on.jpg is CHOSEN  
image 1 with url : www.../thumb2_off.jpg is NOT CHOSEN  
image 2 with url : www.../thumb2_off.jpg is NOT CHOSEN  
image 3 ...  
.  
.  
.  
image 11 with url : www.../thumb2_on.jpg is CHOSEN

this is the code from the external js file :

function selectedImages(){
        var all_imgs = document.getElementsByTagName('img');

        for(var i=0; i<all_imgs.length; i++){

            var item = all_imgs[i].src;
            var item_limit = item.length-4;
            var item_limit2 = item.length-6;
            //document.write(item_limit);
            //document.write(item_limit2);

            var selected = item.substring(item_limit, item_limit2);

            if (selected == 'on') {
                document.write('image ' + i + ' with url : ' + item + ' is ');
                document.write('chosen');
                document.write('<br>');
            }
            else {
                document.write('image ' + i + ' with url : ' + item + ' is ');
                document.write('not chosen');
                document.write('<br>');
            }

        }
    }

the onclick event from the html file :

<a href="#" onclick="javascript:selectedImages();">test</a>

or

<form action="#" method="post" onsubmit="javascript:selectedImages();">

and the print out :

image 0 with url : www.../thumb2_on.jpg is CHOSEN

Guffa · Accepted Answer · 2011-09-12 09:11:32Z

2

That is because you are using document.write after the page has loaded. It will replace the current page with the new content, so when you get to the second iteration in the loop there aren't any images in the page any more.

answered Sep 12, 2011 at 9:11

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

Collectives™ on Stack Overflow

javascript. my for loop stops after one iteration when enclosed in a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related