CODEWITHSUNDEEP
javascripthtml
George
George

Reputation: 29

Why do my onclick function only work once?

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>

Upvotes: 2

Views: 229

Answers (1)

mplungjan
mplungjan

Reputation: 177754

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>

Upvotes: 1

Related Questions