JavaScript 系列二：第5課 ── 認識 onchange 事件

by max002215

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

</head>
<body>
  <div id="app"></div>
  <input type="text" placeholder="請輸入代辦事項" id="text1">
  <select id="urgent" onchange="inputcolor()">
  <option value="none" selected disabled hidden>事項分類</option>
    <option value="normal">普通</option>
    <option value="important">重要</option>
    <option value="emergent">緊急</option>
  </select>
  <button type="button"onclick="to_do_list()">新增</button>
  <ul id="first_list">
  <li>
    <span>倒垃圾</span>
  </li>
  <li>
    <span>繳電話費</span>
  </li>
  <li>
    <span>採買本週食材</span>
  </li>
</ul>
<button type="button" id="export_btn">匯出</button>
</body>
</html>

CSS

.important {
  color: orange;
}
.emergent {
    color: red;
}
.normal {
  color: green;
}
.text_normal{
  color:green;
  font-weight: 500;
}
.text_important{
  color:orange;
  font-weight: 500;
}
.text_emergent{
  color:red;
  font-weight: 500;
}

JavaScript

function	to_do_list (){
let list = document.getElementById("text1").value;
let FirstList = document.getElementById("first_list");
let listUrgent = document.getElementById("urgent");
let list1= document.createElement('li');
let list2= document.createElement('span');
let btn= document.createElement('button');
let listUrgentIndex = listUrgent.selectedIndex
let listUrgenValue = listUrgent.options[listUrgentIndex].value
let list3=list2.textContent=list;
let btn1=btn.textContent="刪除";
FirstList.append(list1);
list1.append(list2,btn);
btn.onclick=hello;
if (listUrgenValue == "normal"){
list1.className = list1.className + "normal";
}else if(listUrgenValue == "important"){
list1.className = list1.className + "important";
}else{
list1.className = list1.className + "emergent";
}
/* list2.append(list3);
 */
/* console.log(list) */
/* console.log(FirstList) */
/* console.log(list1) */
/* console.log(list2);
console.log(list3); */


}
let exportBtn = document.getElementById("export_btn");
exportBtn.onclick=exportList;
function exportList () {
//先抓到主要清單子層
let list = document.getElementById("first_list").children;
//設立空字串
let text = "";
//設立號碼
let num = 1;
//迴圈開始 item=迴圈變數名 of=把剛剛的抓到的子層陣列塞到迴圈變數裡面 list剛剛抓到子層的變數名
for (let item of list){
let itemclass = item.className;
if (itemclass == "important"){//內容為空字串=空字串+號碼.轉成字串方法+點字串+迴圈變數.子層[陣列序號].文字內容+空字串
text = text + num.toString()+"."+"*"+item.children[0].textContent+"*";}else if (itemclass == "emergent"){
text = text + num.toString()+"."+"**"+item.children[0].textContent+"**";
} else {
text = text + num.toString()+"."+item.children[0].textContent+" ";
}
//號碼=號碼+1
	num = num + 1
}
alert("今日待辦事項:"+text)
}
function hello () {
//event.target是取得當前操作哪個標籤
//parentElement是往上一層標籤(父母)
//remove()是刪除函式
event.target.parentElement.remove();
}
function inputcolor(){
var inputValue = event.target.options[event.target.selectedIndex].value;
console.log(inputValue)
let list = document.getElementById("text1")
if (inputValue ==...