.setAttribute在for循环中不起作用-JavaScript

Question

我的JS脚本有一个小问题。 我试图给数组中的每个元素一个不同的数字，这些数字也在数组中设置。 当然，我使用了for循环。 现在在for循环之外，这很好用。

var i = 0;
document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);

但是，一旦我将其放入for循环中，整个脚本就无法执行。 浏览器根本不会加载脚本。

var AlleBilder = document.getElementsByClassName("MosaikBilder");
for(i=0; i<AlleBilder.length -1; i++){
    document.getElementsByClassName("MosaikBilder")[i].setAttribute("value", BilderListe[i]);
}

为了更好地理解这一点，请参见html和CSS：

HTML：

<div class="padding"></div>
<img class="MosaikBilder" src="B1.png" value=0 >
<img class="MosaikBilder" src="B2.png" value=0 >
<img class="MosaikBilder" src="B3.png" value=0 >
<img class="MosaikBilder" src="B4.png" value=0 >
<img class="MosaikBilder" src="B5.png" value=0 >
<img class="MosaikBilder" src="B6.png" value=0 >
<div style="clear: both"></div>
<div class="padding"></div>

CSS：

    title {
        display: none;
    }

    .padding {
        width: 100%;
        height: 200px;
        background-color: red;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .MosaikBilder {
        margin: 10px;
        float: left;
    }

BilderListe是一个普通数组，由以下JS生成：

function Zahlenzuweisung(){
    for(var i=0 ; i<BilderListe.length; i++){
        BilderListe[i] = Math.round(Math.random()*1000);
        if(BilderListe[i] > 1000){
            BilderListe[i] = 1000;
        }
    }

数组包含15个随机生成的数字，似乎还不错。 数组的其他所有功能都可以正常工作。

有什么建议为什么我将一行代码放入for循环后就不会立即执行整个脚本？

任何帮助都将不胜感激，我相对较新，感谢各种帮助:)

编辑：这是小提琴。 这是我的第一个，因此在某些方面可能会失败https://jsfiddle.net/ugdb1423/6/

注意：脚本背后的整个想法是，每次加载页面时都要重新排列图片。 我首先生成了一个随机数列表，没有任何双倍的数字。 完成此操作后，我希望将所有图片都放在列表中，并为它们提供一个随机数。 然后，我想对这个列表进行排序，删除图片，然后将它们放回新的顺序。 为了存储生成的数字，我想到了使用“值”属性。 就像我说的那样，它似乎在for循环之外起作用，而不是在内部起作用。

Answer 1

我不太明白如何生成“ BilderListe”数组，但是包含15个随机生成的数字，每个数字最大为1000，您可以在“ Zahlenzuweisung”内部创建一个数组，如下所示：

var BilderListe = [];

for (var i = 0; i < 15; i++) {
  var num = Math.round(Math.random()*1000);
  if(num > 1000){
    num = 1000;
    BilderListe.push(num);
  }else {
    BilderListe.push(num);
  }
}

然后您可以使用以下脚本更改图像的每个值

var AlleBilder = document.getElementsByClassName("MosaikBilder");
for(i=0; i<AlleBilder.length -1; i++){
  AlleBilder[i].setAttribute("value", BilderListe[i]);
}

但是请注意，如果此代码段位于“ Zahlenzuweisung”函数内，则可以使用它。 因为'BilderListe'数组是在函数本地声明的。 如果要全局使用它，请

var BilderListe = [];

函数外的声明

Answer 2

发现问题：

实际上，这是您在小提琴中可以看到的最后一个功能。 我不知道为什么，但是由于该函数与AlleBilder一起使用，因此可能会带来一些复杂性。

感谢所有提供帮助的人！ :)