I'm trying to make a simple to-do list to practice javascript. That's what I manage to do so far, but now I am completely stuck. My knowledge only allows me to tweak things around, hoping that would do something.
So the problem is that I can add tasks and open the prompt window when I click on the "Edit" button, but the edit function works only with the first tasks. Hopefully, my code makes some sense. Thank you for your suggestions in advance. PS: The "Edit" function should only make the prompt window appear for now.
let adding_tasks = document.getElementById('add');
let element = document.getElementById('task-container');
let entering_task;
let para;
let node;
let paraEdit;
let nodeEdit;
adding_tasks.addEventListener('click', () => {
entering_task = window.prompt('Enter your task: ');
para = document.createElement('p');
para.setAttribute('id', 'tasks');
node = document.createTextNode(entering_task);
paraEdit = document.createElement('p');
paraEdit.setAttribute('id', 'edit');
nodeEdit = document.createTextNode('Edit');
para.appendChild(node);
element.appendChild(para);
paraEdit.appendChild(nodeEdit);
element.appendChild(paraEdit);
edit.onclick = function() {
entering_task = window.prompt('Enter your task: ', entering_task);
};
});<div class="navbar">
<div class="container">
<h1 class="logo">ToDoLIST</h1>
</div>
</div>
<section>
<div id="task-container" class="container">
<h1 class="my-tasks">Your Tasks</h1>
<img id="add" class="add-button" src="img/add_button.svg" alt="Add task">
</div>
</section>
<script src="main.js"></script>So apart from the typo, you are missing some functionality Also IDs need to be unique.
I chose to delegate the click on the edit, I gave the edit a class and wrapped the tasks
I also renamed some elements to be self documenting
const adding_tasks = document.getElementById('add');
const container = document.getElementById('task-container');
container.addEventListener('click', function(e) { // any click in the task list
const tgt = e.target;
if (tgt.classList.contains('edit')) { // edit was clicked
const para = tgt.closest('div').querySelector('p');
para.textContent = window.prompt('Edit your task: ', para.textContent);
}
});
adding_tasks.addEventListener('click', () => {
const entering_task = window.prompt('Enter your task: ');
const task = document.createElement('div');
const para = document.createElement('p');
para.setAttribute('id', 'tasks');
const node = document.createTextNode(entering_task);
const paraEdit = document.createElement('p');
paraEdit.classList.add('edit');
const nodeEdit = document.createTextNode('Edit');
para.appendChild(node);
paraEdit.appendChild(nodeEdit);
task.appendChild(para)
task.appendChild(paraEdit);
container.appendChild(task);
});<div class="navbar">
<div class="container">
<h1 class="logo">ToDoLIST</h1>
</div>
</div>
<section>
<div id="task-container" class="container">
<h1 class="my-tasks">Your Tasks</h1>
<img id="add" class="add-button" src="img/add_button.svg" alt="Add task">
</div>
</section>
<script src="main.js"></script>