Uncaught TypeError: Cannot read property 'length' of undefined
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>零基础JavaScript编码（三）</title>
</head>
<body>
<!-- 参考以下示例代码，读取页面上已有的source列表，从中提取出城市以及对应的空气质量
将数据按照某种顺序排序后，在resort列表中按照顺序显示出来 -->
<ul id="source">
<li>北京空气质量：<b>90</b></li>
<li>上海空气质量：<b>70</b></li>
<li>天津空气质量：<b>80</b></li>
<li>广州空气质量：<b>50</b></li>
<li>深圳空气质量：<b>40</b></li>
<li>福州空气质量：<b>32</b></li>
<li>成都空气质量：<b>90</b></li>
</ul>
<ul id="resort">
<!--
<li>第一名：北京空气质量：<b>90</b></li>
<li>第二名：北京空气质量：<b>90</b></li>
<li>第三名：北京空气质量：<b>90</b></li>
-->
</ul>
<button id="sort-btn">排序</button>
<script type="text/javascript">
/**
* getData方法
* 读取id为source的列表，获取其中城市名字及城市对应的空气质量
* 返回一个数组，格式见函数中示例
*/
function getData() {
/*
coding here
*/
/*
data = [
["北京", 90],
["北京", 90]
……
]
*/
var list = document.getElementById('source').getElementsByTagName('li'); //li元素数组
var num = document.getElementById('source').getElementsByTagName('b'); //获取b元素数组
var data = [];
var city = '';
for (var i = 0; i < list.length; i++) {
// list[i].innerHTML.indexOf('空') 返回“空”的下标
city = list[i].innerHTML.substring(0, list[i].innerHTML.indexOf('空')); // 提取“空”之前的城市名称
//num[i].innerHTML;
data.push([city, num[i].innerHTML]);
}
// document.write(data);
return data;
}
// getData();
/**
* sortAqiData
* 按空气质量对data进行从小到大的排序
* 返回一个排序后的数组
*/
function sortAqiData(data) {
data.sort(function(a, b) {
a[1] - b[1];
return data;
});
}
// sortAqiData(data);
/**
* render
* 将排好序的城市及空气质量指数，输出显示到id位resort的列表中
* 格式见ul中的注释的部分
*/
function render(data) {
var rank = [
[0, '一'],
[1, '二'],
[2, '三'],
[3, '四'],
[4, '五']
];
for (var i = 0; i < data.length; i++) {
document.getElementById('resort').innerHTML += "<li>第" + rank[i][1] + "名:" + data[i][0] + "空气质量:" + "<b>" + data[i][1] + "</b>" + "</li>";
}
}
function btnHandle() {
var aqiData = getData();
aqiData = sortAqiData(aqiData);
render(aqiData);
}
function init() {
// 在这下面给sort-btn绑定一个点击事件，点击时触发btnHandle函数
document.getElementById('sort-btn').onclick = function() {
btnHandle();
};
}
init();
</script>
</body>
</html>提示出错 第83行render函数里面
data.length
puffbaby浏览 1767回答 3
3回答
-
Caballarii
data.sort不会改变data自身，所以要加return。function sortAqiData(data) { return data.sort(function(a, b) { a[1] - b[1]; return data; }); }另外输出函数的循环次数有点问题，自己调一下就好 -
彩笔酱
function sortAqiData(data) { data.sort(function(a, b) { return b[1] - a[1]; }); return data; }
随时随地看视频慕课网APP
相关分类
JavaScript