Stack Overflow на русском Asked by DeConde on December 26, 2021
Подскажите пжл следующее:
1.Как удалить выделенную галочкой (checked) задачу, нажав на кнопу "Удалить"?
2.Как цветом выделить текст выполненной задачи, нажав на кнопу "Выполнено"?
<!DOCTYPE html>
<html lang="ru">
<head>
<title> Task list </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="../CSS/C1.css"/>
</head>
<body>
<div class="container">
<div>
<h1>Task list</h1>
<div class="create_new_todo">
<input type="text" class="message" placeholder="Описание">
<button class="add">Добавить</button>
<button class="remove">Удалить</button>
<button class="clear">Очистить</button>
<button class="done">Выполнено</button>
</div>
<div class="wrapper">
<ul class="todo"></ul>
</div>
</div>
</div>
<script src="../JS/TASK1.js"></script>
</body>
</html>
let addMessage = document.querySelector('.message');
let addButton = document.querySelector('.add');
let removeButton = document.querySelector('.remove');
let doneButton = document.querySelector('.done');
let clearButton = document.querySelector('.clear');
let todo = document.querySelector('.todo');
let todoList = [];
if(localStorage.getItem('todo')) {
todoList = JSON.parse(localStorage.getItem('todo'));
displayMessages();
}
addButton.addEventListener('click', function() {
if(!addMessage.value) return;
let newTodo = {
todo: addMessage.value,
checked: false,
important: false
};
todoList.push(newTodo);
displayMessages();
localStorage.setItem('todo', JSON.stringify(todoList));
});
function displayMessages() {
let displayMessage = '';
if(todoList.length === 0) todo.innerHTML = '';
todoList.forEach(function(item, index) {
displayMessage += `
<li>
<input type='checkbox' id='item_${index}' ${item.checked ? 'checked' : ''}>
<label for='item_${index}' class="${item.important ? 'important' : ''}">${item.todo}</label>
</li>
`;
todo.innerHTML = displayMessage;
});
}
clearButton.addEventListener('click', function(event) {
todoList = [];
displayMessages();
localStorage.setItem('todo', JSON.stringify(todoList));
Можно так:
removeButton.addEventListener('click', e => {
const checkboxAll = [...document.querySelectorAll('input[type=checkbox]')];
checkboxAll.forEach(item => {
if(item.checked) item.closest('li').remove();
});
});
doneButton.addEventListener('click', e => {
const checkboxAll = [...document.querySelectorAll('input[type=checkbox]')];
checkboxAll.forEach(item => {
if(item.checked) item.closest('li').style.color = 'green';
});
});
Только с localStorage я не стал заморачиваться, там думаю проблем не возникнет
Answered by fortavey on December 26, 2021
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP