Изменение класса с помощью toggle
Всем очередной раз привет!
Все еще пилю тудушку своими кривыми ручками и в очередной раз закипает голова и ничего не понимаю. Хочу прилепить функцию редактирования выбранной задачи. При нажатии на кнопку "Edit" должна меняться кнопка "Добавить" на "Изменить". И при нажатии на кнопку "Изменить" должна меняться кнопка обратно на "Добавить". Вроде я это криво-косо сделал. Но кнопка "Добавить"\"Изменить" меняется туда-сюда постоянно после нажатия кнопки "Edit". Помогите, пожалуйста, сделать так, как описано в начале сообщения, плиз. Надеюсь понятно объяснил.:help: Остальной функционал по редактированию попробую доделать сам :) И еще сразу вопрос мимо темы. Что бы при нажатии на кнопку "Del" и "Edit" не происходил чекед пункта, нужно ограничить его с помощью CSS или вынести кнопки из li?
<!DOCTYPE html>
<html>
<head>
<title>Приложение To-Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="todo">
<h1>Мой список дел</h1>
<p1 id="p1">Всего задач:</p1>
<p2 id="p2">Задач активно:</p2>
<input type="text" placeholder="Добавить список" class="title">
<button id='addEdd' type="text" class="addBtn editBtn"></button>
<ul class="todos">
<li>
<span calss="todo-text">
Прикрутить добавление по ентер
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
<span class="todo-edit">
<button class="edit" type="text"></button>
</span>
</li>
<li>
<span calss="todo-text">
Добавить кнопку к инпут
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
<span class="todo-edit">
<button class="edit" type="text"></button>
</span>
</li>
</ul>
<div id="buttons">
<button class="clear">Очистить</button>
</div>
<select class="todo__options">
<option value="active">активные</option>
<option value="completed">завершённые</option>
<option value="deleted">удалённые</option>
</select>
</div>
<script type="text/javascript" src="index.js"> </script>
</body>
</html>
'use strict';
function ToDo() {
const input = document.querySelector("input.title");
const addBtn = document.querySelector("#addEdd");
const clearButton = document.querySelector("button.clear");
const ul = document.querySelector("ul.todos");
const allTasks = document.querySelector('#p1');
const activeTasks = document.querySelector('#p2');
let tasks = [];
addBtn.classList.toggle('editBtn');
ul.addEventListener("click", onClickTodo);
ul.querySelectorAll('li').forEach(n => {
listenDeleteTodo(n.querySelector('.todo-trash'), n)
});
ul.querySelectorAll('li').forEach(n => {
editTask(n.querySelector('.todo-edit'), n)
});
let list = document.querySelectorAll('ul.todos > li');
tasks.push(...list);
allTask();
clearButton.addEventListener("click", () => {
ul.innerHTML = "";
localStorage.removeItem('todos', ul.innerHTML);
tasks.length = 0;
allTask();
});
function todoAdd() {
const li = document.createElement('li');
const textSpan = document.createElement("span");
textSpan.classList.add("todo-text");
const newTodo = input.value;
textSpan.append(newTodo);
const deleteButton = document.createElement('span');
deleteButton.classList.add("todo-trash");
const button = document.createElement("button");
button.type = 'text';
button.classList.add("trash");
deleteButton.appendChild(button);
const editBtn = document.createElement('span');
editBtn.classList.add('todo-edit');
const buttonEd = document.createElement("button");
buttonEd.type = 'text';
buttonEd.classList.add('edit');
editBtn.appendChild(buttonEd);
tasks.push(li);
allTask();
ul.appendChild(li).append(textSpan, deleteButton, editBtn);
input.value = "";
input.focus();
listenDeleteTodo(deleteButton, li);
editTask(editBtn, li);
}
function onClickTodo(event) {
let target = event.target.closest("LI");
if (target) {
target.classList.toggle("checked");
allTask();
}
}
addBtn.addEventListener('click', () => {
if (input.value.trim().length) {
todoAdd();
}
})
input.addEventListener('keydown', (e) => {
if (input.value.trim().length && e.keyCode === 13) {
todoAdd();
}
})
function listenDeleteTodo(button, i) {
button.addEventListener("click", (event) => {
event.preventDefault();
i.remove();
tasks.splice(tasks.indexOf(i), 1);
allTask();
});
}
function allTask() {
let count = tasks.length;
let checked = tasks.filter(li => li.classList.contains('checked')).length
allTasks.textContent = `Всего задач: ${count}`;
activeTasks.textContent = `Задач активно: ${count - checked}`;
}
function editTask(button, i) {
button.addEventListener("click", (event) => {
console.log('edit');
input.value = i.textContent;
addBtn.classList.toggle('editBtn');
toggleBtn();
});
}
function toggleBtn () {
let editBtn = document.querySelector(".editBtn");
editBtn.addEventListener('click', (event) => {
editBtn.classList.toggle('editBtn');
event.preventDefault();
})
}
}
document.addEventListener("DOMContentLoaded", ToDo);
Код:
button.addBtn::after { |
bizunowvova,
html строка 17 и 28 опечатка |
bizunowvova,
<!DOCTYPE html>
<html>
<head>
<title>Приложение To-Do List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
button.addBtn::after {
content: "Добавить";
}
button.editBtn::after {
content: "Изменить";
}
button.trash::after {
content: "Del";
}
button.trash {
background-color: none;
border: none;
color: gray;
padding: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
border-radius: 50%;
margin-left: 4px;
}
button.edit::after {
content: "Edit";
}
button.edit {
background-color: none;
border: none;
color: gray;
padding: 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 11px;
border-radius: 50%;
}
.todos li {
cursor: pointer;
font-size: 15px;
padding: 3px 0px; list-style: decimal;
}
li.checked span.todo-text{
color: gray;
text-decoration: line-through;
}
.todos li span.todo-text {
padding: 10px 0px;
}
#todo {
margin: 0 auto;
max-width: 350px;
height: 100%;
background: white;
position: relative;
}
</style>
</head>
<body>
<div id="todo">
<h1>Мой список дел</h1>
<p id="p1">Всего задач:</p>
<p id="p2">Задач активно:</p>
<input type="text" placeholder="Добавить список" class="title">
<button id='addEdd' type="text" class="addBtn"></button>
<ul class="todos">
<li>
<span class="todo-text">
Прикрутить добавление по ентер
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
<span class="todo-edit">
<button class="edit" type="text"></button>
</span>
</li>
<li>
<span class="todo-text">
Добавить кнопку к инпут
</span>
<span class="todo-trash">
<button class="trash" type="text"></button>
</span>
<span class="todo-edit">
<button class="edit" type="text"></button>
</span>
</li>
</ul>
<div id="buttons">
<button class="clear">Очистить</button>
</div>
<select class="todo__options">
<option value="active">активные</option>
<option value="completed">завершённые</option>
<option value="deleted">удалённые</option>
</select>
</div>
<script>
'use strict';
function ToDo() {
const input = document.querySelector("input.title");
const addBtn = document.querySelector("#addEdd");
const clearButton = document.querySelector("button.clear");
const ul = document.querySelector("ul.todos");
const allTasks = document.querySelector('#p1');
const activeTasks = document.querySelector('#p2');
let tasks = [];
ul.addEventListener("click", onClickTodo);
ul.querySelectorAll('li').forEach(n => {
listenDeleteTodo(n.querySelector('.todo-trash'), n)
});
ul.querySelectorAll('li').forEach(n => {
editTask(n.querySelector('.todo-edit'), n)
});
let list = document.querySelectorAll('ul.todos > li');
tasks.push(...list);
allTask();
clearButton.addEventListener("click", () => {
ul.innerHTML = "";
localStorage.removeItem('todos', ul.innerHTML);
tasks.length = 0;
allTask();
});
function todoAdd() {
const li = document.createElement('li');
const textSpan = document.createElement("span");
textSpan.classList.add("todo-text");
const newTodo = input.value;
textSpan.append(newTodo);
const deleteButton = document.createElement('span');
deleteButton.classList.add("todo-trash");
const button = document.createElement("button");
button.type = 'text';
button.classList.add("trash");
deleteButton.appendChild(button);
const editBtn = document.createElement('span');
editBtn.classList.add('todo-edit');
const buttonEd = document.createElement("button");
buttonEd.type = 'text';
buttonEd.classList.add('edit');
editBtn.appendChild(buttonEd);
tasks.push(li);
allTask();
ul.appendChild(li).append(textSpan, deleteButton, editBtn);
input.value = "";
input.focus();
listenDeleteTodo(deleteButton, li);
editTask(editBtn, li);
}
function onClickTodo(event) {
let target = event.target.closest("LI");
if (target) {
target.classList.toggle("checked");
allTask();
}
}
addBtn.addEventListener('click', () => {
let txt = input.value.trim();
if (txt.length) {
if (textSpan) {
textSpan.textContent = txt;
input.value = '';
textSpan = null;
} else todoAdd();
}
addBtn.classList.remove('editBtn');
})
input.addEventListener('keydown', (e) => {
if (input.value.trim().length && e.keyCode === 13) {
todoAdd();
}
})
function listenDeleteTodo(button, i) {
button.addEventListener("click", (event) => {
event.preventDefault();
i.remove();
tasks.splice(tasks.indexOf(i), 1);
allTask();
});
}
function allTask() {
let count = tasks.length;
let checked = tasks.filter(li => li.classList.contains('checked')).length
allTasks.textContent = `Всего задач: ${count}`;
activeTasks.textContent = `Задач активно: ${count - checked}`;
}
let textSpan;
function editTask(button, i) {
button.addEventListener("click", (event) => {
event.stopPropagation();
let span = i.querySelector(".todo-text")
addBtn.classList.toggle('editBtn', span !== textSpan);
let edit = addBtn.classList.contains('editBtn');
textSpan = edit ? span : null;
input.value = edit ? textSpan.textContent.trim() : '';
});
}
}
document.addEventListener("DOMContentLoaded", ToDo);
</script>
</body>
</html>
|
рони, спасибо! Пошел переваривать все написанное)
|
| Часовой пояс GMT +3, время: 11:41. |