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

Question

hope everyone is having a good day so far.

I have a weird problem in a JavaScript. The Job of the Script is to order the divs differently every time someone visits the page. For that i generate and array with random numbers, making sure that there are no doubled ones. Then i give every div its number and sort them before putting them back onto the page. Right now, i get stuck at the part where i sort the divs in an array.

I get a TypeError that seems to make zero sense, since i already used "typeof" to see if the outputs are undefined, but they are solid numbers. Here is the Code:

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

and now the Score, the 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);
}

this is the console log, so you don't need to try it yourself:

[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')

Maybe someone has an idea why it occurs and how to fix it. I Didn't change any of the names or logs in case they are part of the problem. But like i said earlier, both values are typeof numbers, so why does the 2nd one not work in the if-loop?

Also, if there is any other way to do it more easily, feel free to correct me, i am relatively new and thankful for any help.

Best regards and thanks a lot in advance

Answer 1

Looks like your final iteration will look for an element in your array that doesn't exist (i.e. out of bounds)

Try changing

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

to

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

Answer 2

Pretty simple

AlleBilder[i+1] is undefined when you are at the last index.

So you would need to change your loop

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