Otóż mam takie pytanie. Jak można za pomocą takiego kodu
document.addEventListener('DOMContentLoaded', function() {
const enterTask = document.getElementById('enter-task');
const btnToDo = document.querySelector('button');
const toDoContainer = document.getElementById('todo-container');
btnToDo.addEventListener('click', function() {
toDoContainer.innerHTML += `<div class="task-container"><input type="checkbox" data-complete><span>${enterTask.value}</span><button type="button" data-delete>X</button></div>`;
const checkBox = document.querySelectorAll('[data-complete]');
const span = document.querySelectorAll('span');
const btn = document.querySelectorAll('[data-delete]');
const div = document.querySelectorAll('.task-container');
for (let i = 0; i < checkBox.length; i++) {
btn[i].addEventListener('click', function() {
div[i].parentNode.removeChild(div[i]);
});
checkBox[i].addEventListener('click', function() {
if (checkBox[i].checked) {
span[i].style.textDecoration = 'line-through';
return;
}
span[i].style.textDecoration = 'none';
});
}
});
});
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utworzenie listy zadań - Todo lista</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<script src="../js/index.js" defer></script>
</head>
<body>
<div class="container">
<div class="new-task-container">
<h1>Todo List</h1>
<label for="enter-task">Wprowadź zadanie</label>
<input type="text" id="enter-task">
<button type="button">OK</button>
</div>
<div id="todo-container"></div>
</div>
</body>
</html>
dać możliwość użytkownikowi edycji danego zadanie które już zatwierdził. O co chodzi, już wyjaśniam. Otóż chodzi o to że użytkownik wprowadza do jakąś treść zadania w pole input html'a, po czym wyświetla mu się to zadanie pod spodem ale chcę je np. edytować, a następnie zatwierdzić nową wartość wprowadzoną po edycji