TypeError： undefined is not a object (求值 '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')

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

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

最好的问候，提前

非常感谢

Answer 1

非常简单

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

所以你需要改变你的循环

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

Answer 2

看起来您的最终迭代将在数组中查找不存在的元素(即越界(

尝试更改

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

自

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