💡 Tôi đã chuẩn bị sẵn trình soạn thảo bên dưới bài viết. Bạn có thể thử nghiệm thoải mái!
Cập nhật: 2025年3月1日
Ứng dụng TODO
📌
Kết luận
Kết hợp nhiều kỹ năng để tạo ra tính năng thêm TODO
📝 Mã thực tế tại đây
form.addEventListener('submit', (e) => {
e.preventDefault(); // Ngăn trang web bị tải lại
const li = document.createElement('li');
li.textContent = input.value;
list.appendChild(li);
input.value = ''; // Xóa sạch ô nhập liệu
});Tổng kết
-e.preventDefault() là bắt buộc khi xử lý form bằng JavaScript
- Quy trình: Lấy giá trị -> Tạo thẻ -> Gắn vào danh sách -> Reset ô nhập
Hãy thử trong phần bài tập
Hãy hoàn thiện tính năng thêm mục mới vào danh sách nhé.🧪 Thử nghiệm tại đây
Bạn có thể viết mã thực tế vào trình soạn thảo bên dưới và xem ngay kết quả. Đừng sợ làm hỏng, bạn có thể thử lại bao nhiêu lần tùy thích.
■ Bài tập thực hành
Khi nhấn nút, hãy thêm nội dung từ ô input vào danh sách ul.
Gợi ý khi gặp khó khăn
Kết hợp lấy giá trị input và tạo phần tử mới.