<!DOCTYPE?html>
<html>
<head>
????<meta?charset="utf-8">
????<title>零基礎(chǔ)JavaScript編碼（三）</title>
</head>
<body>
????<!--?參考以下示例代碼，讀取頁面上已有的source列表，從中提取出城市以及對應的空氣質(zhì)量
將數(shù)據(jù)按照某種順序排序后，在resort列表中按照順序顯示出來?-->
????<ul?id="source">
????????<li>北京空氣質(zhì)量：<b>90</b></li>
????????<li>上海空氣質(zhì)量：<b>70</b></li>
????????<li>天津空氣質(zhì)量：<b>80</b></li>
????????<li>廣州空氣質(zhì)量：<b>50</b></li>
????????<li>深圳空氣質(zhì)量：<b>40</b></li>
????????<li>福州空氣質(zhì)量：<b>32</b></li>
????????<li>成都空氣質(zhì)量：<b>90</b></li>
????</ul>
????<ul?id="resort">
????????<!--?
????<li>第一名：北京空氣質(zhì)量：<b>90</b></li>
????<li>第二名：北京空氣質(zhì)量：<b>90</b></li>
????<li>第三名：北京空氣質(zhì)量：<b>90</b></li>
?????-->
????</ul>
????<button?id="sort-btn">排序</button>
????<script?type="text/javascript">
????/**
?????*?getData方法
?????*?讀取id為source的列表，獲取其中城市名字及城市對應的空氣質(zhì)量
?????*?返回一個數(shù)組，格式見函數(shù)中示例
?????*/
????function?getData()?{
????????/*
????????coding?here
????????*/
????????/*
????????data?=?[
??????????["北京",?90],
??????????["北京",?90]
??????????……
????????]
????????*/
????????var?list?=?document.getElementById('source').getElementsByTagName('li');?//li元素數(shù)組
????????var?num?=?document.getElementById('source').getElementsByTagName('b');?//獲取b元素數(shù)組
????????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
?????*?按空氣質(zhì)量對data進行從小到大的排序
?????*?返回一個排序后的數(shù)組
?????*/
????function?sortAqiData(data)?{
????????data.sort(function(a,?b)?{
????????????a[1]?-?b[1];
????????????return?data;
????????});
????}
????//?sortAqiData(data);
????/**
?????*?render
?????*?將排好序的城市及空氣質(zhì)量指數(shù)，輸出顯示到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]?+?"空氣質(zhì)量:"?+?"<b>"?+?data[i][1]?+?"</b>"?+?"</li>";
????????}
????}
????function?btnHandle()?{
????????var?aqiData?=?getData();
????????aqiData?=?sortAqiData(aqiData);
????????render(aqiData);
????}
????function?init()?{
????????//?在這下面給sort-btn綁定一個點擊事件，點擊時觸發(fā)btnHandle函數(shù)
????????document.getElementById('sort-btn').onclick?=?function()?{
????????????btnHandle();
????????};
????}
????init();
????</script>
</body>
</html>提示出錯 第83行render函數(shù)里面?data.length
Uncaught TypeError: Cannot read property 'length' of undefined
puffbaby
2016-12-15 10:52:13
