Uncaught TypeError: Cannot read property 0 of undefined
Uncaught TypeError: Cannot read property 0 of undefined
我正在尝试制作条形图分类器。单击按钮,它将对条形图进行排序。但是当我 运行 排序函数时,它给了我这个错误。
我已经尝试在我的文件中搜索拼写错误,因为这是其他答案中推荐的。
提前致谢。
这是我的 JS:
document.getElementById('sort').onclick = () => {
setTimeout(function(){
for (let i = 0; i < 8; i++) {
let g = document.getElementsByClassName('bar');
g[i].style.height = sort()[i]
console.log(sort()[i])
}},100)
}
function sort() {
let array = [];
for (let i = 0; i < 8; i++) {
let g = document.getElementsByClassName('bar');
array.push(parseInt(g[i].innerText));
if (i >= 8) {
return sortItems(array)
}
}
}
function sortItems(array) {
var length = array.length;
for(var i = 1, j; i < length; i++) {
var temp1 = array[i];
for(var j = i - 1; j >= 0 && array[j] > temp1; j--) {
array[j+1] = array[j];
}
array[j+1] = temp1;
}
return array;
}
这是我的 html:
<button id="regenerate">Regenerate</button>
<button id="sort">Sort</button>
<div class="bars">
<div class="bar" id="bar1"><p class="barlabel"></p></div>
<div class="bar" id="bar2"><p class="barlabel"></p></div>
<div class="bar" id="bar3"><p class="barlabel"></p></div>
<div class="bar" id="bar4"><p class="barlabel"></p></div>
<div class="bar" id="bar5"><p class="barlabel"></p></div>
<div class="bar" id="bar6"><p class="barlabel"></p></div>
<div class="bar" id="bar7"><p class="barlabel"></p></div>
<div class="bar" id="bar8"><p class="barlabel"></p></div>
</div>
<script src="index.js"></script>
让我们看一下 sort() 函数中的这个 for 循环:
for (let i = 0; i < 8; i++) {
let g = document.getElementsByClassName('bar');
array.push(parseInt(g[i].innerText));
if (i >= 8) {
return sortItems(array)
}
}
如果 i >= 8
它只是 return 一个数组,但循环本身只会迭代 i < 8
。这意味着 sort() 函数永远不会 return 任何东西。
在这一行 g[i].style.height = sort()[i]
中,您期望一个数组作为 sort()
的 return 值,但它实际上是 undefined
。只需用 console.log(typeof sort())
.
证明即可
我正在尝试制作条形图分类器。单击按钮,它将对条形图进行排序。但是当我 运行 排序函数时,它给了我这个错误。 我已经尝试在我的文件中搜索拼写错误,因为这是其他答案中推荐的。
提前致谢。
这是我的 JS:
document.getElementById('sort').onclick = () => {
setTimeout(function(){
for (let i = 0; i < 8; i++) {
let g = document.getElementsByClassName('bar');
g[i].style.height = sort()[i]
console.log(sort()[i])
}},100)
}
function sort() {
let array = [];
for (let i = 0; i < 8; i++) {
let g = document.getElementsByClassName('bar');
array.push(parseInt(g[i].innerText));
if (i >= 8) {
return sortItems(array)
}
}
}
function sortItems(array) {
var length = array.length;
for(var i = 1, j; i < length; i++) {
var temp1 = array[i];
for(var j = i - 1; j >= 0 && array[j] > temp1; j--) {
array[j+1] = array[j];
}
array[j+1] = temp1;
}
return array;
}
这是我的 html:
<button id="regenerate">Regenerate</button>
<button id="sort">Sort</button>
<div class="bars">
<div class="bar" id="bar1"><p class="barlabel"></p></div>
<div class="bar" id="bar2"><p class="barlabel"></p></div>
<div class="bar" id="bar3"><p class="barlabel"></p></div>
<div class="bar" id="bar4"><p class="barlabel"></p></div>
<div class="bar" id="bar5"><p class="barlabel"></p></div>
<div class="bar" id="bar6"><p class="barlabel"></p></div>
<div class="bar" id="bar7"><p class="barlabel"></p></div>
<div class="bar" id="bar8"><p class="barlabel"></p></div>
</div>
<script src="index.js"></script>
让我们看一下 sort() 函数中的这个 for 循环:
for (let i = 0; i < 8; i++) {
let g = document.getElementsByClassName('bar');
array.push(parseInt(g[i].innerText));
if (i >= 8) {
return sortItems(array)
}
}
如果 i >= 8
它只是 return 一个数组,但循环本身只会迭代 i < 8
。这意味着 sort() 函数永远不会 return 任何东西。
在这一行 g[i].style.height = sort()[i]
中,您期望一个数组作为 sort()
的 return 值,但它实际上是 undefined
。只需用 console.log(typeof sort())
.