TypeError: undefined is not an object (evalating 'XYZ') - JavaScript

Question

希望到目前为止每个人都过得愉快。

我在 JavaScript 中有一个奇怪的问题。脚本的工作是订购 每次有人访问该页面时，div 都会有所不同。为此，我使用随机数生成和排列，确保没有加倍的。然后我给每个 div 它的编号并在放置之前对它们进行排序 他们回到页面上。现在，我陷入了对数组中的 div 进行排序的部分。

我得到一个似乎为零意义的 TypeError，因为我已经使用“typeof”来查看输出是否未定义，但它们是实数。 这是代码：

HTML：

<div class="padding"></div>
<div class="MosaikBilder">1</div>
<div class="MosaikBilder">2</div>
<div class="MosaikBilder">3</div>
<div class="MosaikBilder">4</div>
<div class="MosaikBilder">5</div>
<div class="MosaikBilder">6</div>
<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 {
    height: 50px;
    width: 40px;
    background-color: blue;
    margin: 10px;
    float: left;
    color: white;
}

现在是分数，JS：

var BilderListe = ["","", "", "", "", "", "", "", "", "","","","","",""];
//generating an array until there are no doubled values
do{
    var funktionsfaehig = true;
    Zahlenzuweisung();
    Dopplungspruefung();
}while(funktionsfaehig == false);
console.log(BilderListe);
Zuordnung();

//generating a random list of numbers   
function Zahlenzuweisung(){
    for(var i=0 ; i<BilderListe.length; i++){
        BilderListe[i] = Math.round(Math.random()*1000);
        if(BilderListe[i] > 1000){
            BilderListe[i] = 1000;
        }
        //alert(BilderListe[i]);
    }
    console.log("Zahlenzuweisung " + BilderListe);
}

//sorting the list so it can be checked more easily, .sort did always miss one number for some reason
function Dopplungspruefung(){
    var Tauschen
    var PruefungsListe;

    PruefungsListe = BilderListe.slice();
    console.log("Dopplungspruefung ist " + BilderListe)
    console.log(PruefungsListe);
    do{
        var getauscht = false;
        for(i=0; i<PruefungsListe.length; i++){
            if(PruefungsListe[i] > PruefungsListe[i+1]){
                Tauschen = PruefungsListe[i];
                PruefungsListe[i] = PruefungsListe[i+1];
                PruefungsListe[i+1] = Tauschen;

                getauscht = true;
            }
        }           
    }while(getauscht == true);
    console.log(PruefungsListe);
    console.log("Nach der Prüfung ist " + BilderListe);
    DerPruefer(PruefungsListe);
}

//checking the sorted list for doubled numbers
//if there are any, new numbers will be generated
function DerPruefer(PruefungsListe){    
    console.log("Der Pruefer wurde gestartet");
    for(i=0; i < PruefungsListe.length; i++){
        if(PruefungsListe[i] == PruefungsListe[i+1]){
            console.log("Etwas war gleich");
            funktionsfaehig = false;
            break;
        }
    }
}

//all divs needed get gathered in one array
//then every element gets a random generated value
function Zuordnung(){
    var AlleBilder = document.getElementsByClassName("MosaikBilder");
    for(i=0; i<AlleBilder.length; i++){
        AlleBilder[i].value = BilderListe[i]
    }
    var Check = AlleBilder[0].value;
    console.log(Check);
    //Bubblesort the Pictures
    BilderSortierer(AlleBilder);
}

//Now i want to sort the elements by their value
//But they TypeError occurs, claiming that the 2nd one
//Has the value 'undefined (log says its a number)
function BilderSortierer(AlleBilder){
    var i = 0
    console.log(AlleBilder[i]);
    console.log(AlleBilder[i].value);
    console.log(typeof(AlleBilder[i].value));
    console.log(AlleBilder[i+1]);
    console.log(AlleBilder[i+1].value);
    console.log(typeof(AlleBilder[i+1].value));
    var Wechsler
    var BilderCheck = true;
    do{
        for(i=0; i<AlleBilder.length; i++){
            if(AlleBilder[i].value > AlleBilder[i+1].value){
                Wechsler = AlleBilder[i];
                AlleBilder[i] = AlleBilder[i+1];
                AlleBilder[i+1] = Wechsler;
                BilderCheck = false;
            }
        }       
    }while(BilderCheck == true);
}

这是控制台日志，不用自己尝试：

[Log] Zahlenzuweisung       142,595,442,790,668,978,652,721,154,280,819,239,425,65,270  (Bilderordner.html, line 64)
[Log] Dopplungspruefung ist 142,595,442,790,668,978,652,721,154,280,819,239,425,65,270 (Bilderordner.html, line 72)
[Log] Array (15) (Bilderordner.html, line 73)
[Log] Array (15) (Bilderordner.html, line 86)
[Log] Nach der Prüfung ist 142,595,442,790,668,978,652,721,154,280,819,239,425,65,270 (Bilderordner.html, line 87)
[Log] Der Pruefer wurde gestartet (Bilderordner.html, line 92)
[Log] Array (15) (Bilderordner.html, line 53)
[Log] 142 (Bilderordner.html, line 108)
[Log] <div class="MosaikBilder">1</div> (Bilderordner.html, line 115)

[Log] 142 (Bilderordner.html, line 116)
[Log] number (Bilderordner.html, line 117)
[Log] <div class="MosaikBilder">2</div> (Bilderordner.html, line 118)

[Log] 595 (Bilderordner.html, line 119)
[Log] number (Bilderordner.html, line 120)
[Error] TypeError: undefined is not an object (evaluating 'AlleBilder[i+1].value')

也许有人知道它为什么会发生以及如何解决它。我没有更改任何名称或日志，以防它们是问题的一部分。但是就像我之前说的，这两个值都是 typeof 数字，那么为什么第二个在 if 循环中不起作用呢？

另外，如果有任何其他方法可以更轻松地做到这一点，请随时纠正我，我相对较新，感谢任何帮助。

提前致以最诚挚的问候和感谢

Answer 1

看起来您的最终迭代将在您的数组中查找不存在的元素（即超出范围）

尝试改变

for(i=0; i<AlleBilder.length; i++)

到

for(i=0; i<AlleBilder.length-1; i++)

Answer 2

很简单

当您位于最后一个索引时，AlleBilder[i+1] 未定义。

所以你需要改变你的循环

for(i=0; i<AlleBilder.length-1; i++){