.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一起使用，因此可能會帶來一些復雜性。

感謝所有提供幫助的人！ :)