JavaScript。当包含在函数中时，我的 for 循环在一次迭代后停止

Question

这是我的问题。当我的代码嵌入到 html 页面中的 body 标记之间时，它会按预期执行：显示 12 行文本（for 循环执行 12 次）；

但是，当我将代码包含在函数中，从外部 js 文件导入它，并尝试使用 onclick 或 onsubmit 事件调用它时，它会在第一次迭代后停止。

这是嵌入在 html 文件中的代码：

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>');
            }

        }  

输出：

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  

这是来自外部 js 文件的代码：

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>');
            }

        }
    }

html 文件中的 onclick 事件：

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

或

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

打印输出：

image 0 with url ： www.../thumb2_on。已选择 jpg

Answer 1

这是因为您在页面加载后使用 document.write 。它将用新内容替换当前页面，因此当您进入循环中的第二次迭代时，页面中不再有任何图像。