การทำเครื่องหมายภารกิจเสร็จสมบูรณ์ในเช็คลิสต์ด้วย JavaScript

ให้เพิ่มเหตุการณ์ในลักษณะเดียวกันกับปุ่ม 'เสร็จแล้ว':

javascriptlet mark = document.createElement('span');
mark.classList.add('mark');
mark.textContent = 'เสร็จแล้ว';
mark.addEventListener('click', function() {
  // โค้ดสำหรับทำเครื่องหมายภารกิจว่าเสร็จสมบูรณ์จะอยู่ที่นี่
});
li.appendChild(mark);

เพื่อที่จะทำเครื่องหมายภารกิจว่าสำเร็จ, ต้องเพิ่มคลาส CSS ใดๆ ให้กับแท็ก li ที่เกี่ยวข้อง ตัวอย่างเช่น เรียกคลาสนี้ว่า done

จากนั้นสำหรับคลาสนี้ สามารถเขียนโค้ด CSS ที่เกี่ยวข้องได้:

css#list .done {
  text-decoration: line-through;
}