<!DOCTYPE>
<html>
??<head>
????<meta?charset="utf-8">
????<title>IFE?JavaScript?Task?01</title>
??</head>
<body>
??<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的列表，獲取其中城市名字及城市對(duì)應(yīng)的空氣質(zhì)量
?*?返回一個(gè)數(shù)組，格式見(jiàn)函數(shù)中示例
?*/
function?getData()?{
??var?ulsource?=?document.getElementById("source");
??var?lisource?=?ulsource.getElementsByTagName("li");
??var?data?=?[];
??for?(var?i=0;?i<=(lisource.length?-?1);?i++)?{
????data[i]?=?[];
????data[i][0]?=?lisource[i].firstChild.nodeValue.substr(0,?2);
????data[i][1]?=?lisource[i].lastChild.firstChild.nodeValue;
??}
??/*
??data?=?[
????["北京",?90],
????["北京",?90]
????……
??]
??*/
??return?data;
}
/**
?*?sortAqiData
?*?按空氣質(zhì)量對(duì)data進(jìn)行從小到大的排序
?*?返回一個(gè)排序后的數(shù)組
?*/
function?sortAqiData(data)?{
??data.sort(function(a,?b)?{
????return?(a[1]?-?b[1]);
??})
??return?data.reverse();
}
/**
?*?render
?*?將排好序的城市及空氣質(zhì)量指數(shù)，輸出顯示到id位resort的列表中
?*?格式見(jiàn)ul中的注釋的部分
?*/
function?render(data)?{
??for?(var?i=0;?i<=document.getElementById("source").childNodes.length-1;?i++)?{
????var?resort?=?document.getElementById("resort");
????var?lili?=?document.createElement("li");
????var?bbb?=?document.createElement("b");
????var?airnum?=?document.createTextNode(data[i][1]);
????bbb.appendChild(airnum);
????var?txt?=?document.createTextNode("第"?+?(i+1)?+?"名:?"?+?data[i][0]?+?"空氣質(zhì)量:?");
????lili.appendChild(txt);
????lili.appendChild(bbb);
????resort.appendChild(lili);
????var?linefeed?=?document.createElement("br");
????resort.appendChild(linefeed);
??}
}
function?btnHandle()?{
??var?aqiData?=?getData();
??aqiData?=?sortAqiData(aqiData);
??render(aqiData);
}
function?init()?{
??//?在這下面給sort-btn綁定一個(gè)點(diǎn)擊事件，點(diǎn)擊時(shí)觸發(fā)btnHandle函數(shù)
??var?btn?=?document.getElementById("sort-btn");
??btn.addEventListener("click",?btnHandle);
}
init();
</script>
</body>
</html>Uncaught TypeError: Cannot read property '1' of undefined? ? at render (index.html:84)? ? at HTMLButtonElement.btnHandle (index.html:102)此處的data應(yīng)該是有值的啊，執(zhí)行沒(méi)問(wèn)題，可為什么會(huì)報(bào)錯(cuò)呢？
JS執(zhí)行沒(méi)問(wèn)題，但報(bào)錯(cuò)，沒(méi)明白其中的邏輯。ife的題目
慕后端7064799
2017-06-04 21:03:56
