[第二十二天] 牛刀小試-簡易代辦事項清單

2024 iThome 鐵人賽

DAY 22

自我挑戰組

認識JavaScript系列第 22 篇

16th鐵人賽

IRENE

2024-10-06 02:07:25

90 瀏覽

分享至

<html>
<head>
  <title>代辦事項清單</title>
  <style>
  li.completed {
    text-decoration: line-through;
    color: gray;
  }
  .delete {
    background-color: red;
    color: white;
  }
  </style>
</head>
<body>
  <h1>代辦事項清單</h1>
  <input type="text" id='inputThing' placeholder="輸入代辦事項">
  <button id='btnOK' onclick="add()">新增</button>
  <ul id='ulList'></ul>
</body>
</html>

畫面上多設計了兩種樣式:
標籤「completed」:灰色且有刪除線。
標籤「delete」:背景紅，字體白。

function add() {
	const inputThing = document.getElementById('inputThing').value.trim();
  
  if (inputThing === "") {
  	alert("請輸入代辦事項");
    return;
  }
  
  const ulList = document.getElementById('ulList');
  const ulst = document.createElement('li');
  
  const span = document.createElement('span');
  span.textContent = inputThing;
  span.onclick = function() {
  	this.parentNode.classList.toggle('completed');
  };
  
  const btnDelete = document.createElement('button');
  btnDelete.textContent = "刪除";
  btnDelete.classList.add('delete');
  btnDelete.onclick = function() {
  	ulList.removeChild(ulst);
  };
  
  ulst.appendChild(span);
  ulst.appendChild(btnDelete);
  ulList.appendChild(ulst);
  
  inputThing.value = "";
}

使用了ul這個特殊物件，以達到較輕易達成新增、刪除的功能。
parentNode.classList.toggle：parentNode指的是父元素，而classList則是指父元素的classList列表，toggle用來判斷父元素有無後面的的標籤：有→移除，沒有→增加。
在appendChild使用上，可看到都由子元素的父元素增加，再繼續往上一層。