OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

button function executes multiple times after the first time

  • Thread starter Thread starter Andrey
  • Start date Start date
A

Andrey

Guest
I'm currently working on a todolist project and I've run into a problem adding new task to the project. When I submit new task for the first time, it worked fine and the task gets pushed into myProjects array. Next time I submit another task, it pushes multiple times of the same task into myProjects array.

Here's my code:

Code:
const mainContent = document.querySelector('#main');



export default function renderMain(event) { //render project from sidebar to mainContent body



    mainContent.textContent = '';
    mainContent.appendChild(addTaskModal); //dialog to input new task and its priority
   
    let index = parseInt(event.target.id.split('-')[1]);

   //try creating the addTask button here.
    
    const projectCard = document.createElement('div');
    projectCard.classList.add('card');

    const projectCardHeader = document.createElement('h3');
    projectCardHeader.classList.add('cardheader');
    projectCardHeader.textContent =  myProjects[index].name
   projectCard.appendChild(projectCardHeader);    
   
   const projectDue = document.createElement('div');
    projectDue.textContent = myProjects[index].due;
    projectDue.classList.add('date');
    projectCard.appendChild(projectDue);

 

       ** submitNewTaskBtn.addEventListener('click', ()=>{
            
            if (!newTaskInput.value || !newPriorityInput.value) {
                alert('please enter the missing value.')
                return;
            }
            else if (myProjects[index].hasOwnProperty('tasks') === false) { //if project has no tasks property, assign tasks property
                myProjects[index].tasks =[(createTask(newTaskInput.value, newPriorityInput.value))];
                
                localStorage.setItem('projects', JSON.stringify(myProjects));
                addTaskModal.close();
                renderMain(event);
            }
            
            myProjects[index].tasks.push(createTask(newTaskInput.value, newPriorityInput.value));
            
            localStorage.setItem('projects', JSON.stringify(myProjects));
            
            addTaskModal.close();
           
            renderMain(event);
            
        })
    **
  
   for (let i = 0; i < myProjects[index].tasks?.length; i++) {
    
    const tasks = document.createElement('div');
   const deleteBtn = document.createElement('button');
   deleteBtn.textContent = 'Delete Task';
   deleteBtn.addEventListener('click', ()=>{
    myProjects[index].tasks.splice(i, 1);
    localStorage.setItem('projects', JSON.stringify(myProjects));
    renderMain(event);
   })
 
//when we want to update after delete, just store with same "key" and the "key" will be updated.
   
  
   tasks.textContent = myProjects[index].tasks[i].name;
   tasks.classList.add('tasks');
   tasks.appendChild(deleteBtn);
   projectCard.appendChild(tasks);
  
}
const addTaskBtn = document.createElement('button');
addTaskBtn.textContent = "Add Task";
mainContent.appendChild(addTaskBtn);
addTaskBtn.addEventListener('click', ()=>{
    
    addTaskModal.showModal();

});
    mainContent.appendChild(addTaskBtn);
    mainContent.appendChild(projectCard)

}

Specifically, this is the part of the code that I'm having a problem with:

Code:
  submitNewTaskBtn.addEventListener('click', ()=>{

            if (!newTaskInput.value || !newPriorityInput.value) {
                alert('please enter the missing value.')
                return;
            }
            else if (myProjects[index].hasOwnProperty('tasks') === false) { //if project has no tasks property, assign tasks property
                myProjects[index].tasks =[(createTask(newTaskInput.value, newPriorityInput.value))];

                localStorage.setItem('projects', JSON.stringify(myProjects));
                addTaskModal.close();
                renderMain(event);
            }

            myProjects[index].tasks.push(createTask(newTaskInput.value, newPriorityInput.value));

            localStorage.setItem('projects', JSON.stringify(myProjects));

            addTaskModal.close();

            renderMain(event);

        })

I'm not sure why it executes multiple times after the first submit, and the number of times doubles after every click.. 2,4,8,16 and so on. Any inputs would be very appreciated. Thank you!

<p>I'm currently working on a todolist project and I've run into a problem adding new task to the project. When I submit new task for the first time, it worked fine and the task gets pushed into myProjects array. Next time I submit another task, it pushes multiple times of the same task into myProjects array.</p>
<p>Here's my code:</p>
<pre><code>const mainContent = document.querySelector('#main');



export default function renderMain(event) { //render project from sidebar to mainContent body



mainContent.textContent = '';
mainContent.appendChild(addTaskModal); //dialog to input new task and its priority

let index = parseInt(event.target.id.split('-')[1]);

//try creating the addTask button here.

const projectCard = document.createElement('div');
projectCard.classList.add('card');

const projectCardHeader = document.createElement('h3');
projectCardHeader.classList.add('cardheader');
projectCardHeader.textContent = myProjects[index].name
projectCard.appendChild(projectCardHeader);

const projectDue = document.createElement('div');
projectDue.textContent = myProjects[index].due;
projectDue.classList.add('date');
projectCard.appendChild(projectDue);



** submitNewTaskBtn.addEventListener('click', ()=>{

if (!newTaskInput.value || !newPriorityInput.value) {
alert('please enter the missing value.')
return;
}
else if (myProjects[index].hasOwnProperty('tasks') === false) { //if project has no tasks property, assign tasks property
myProjects[index].tasks =[(createTask(newTaskInput.value, newPriorityInput.value))];

localStorage.setItem('projects', JSON.stringify(myProjects));
addTaskModal.close();
renderMain(event);
}

myProjects[index].tasks.push(createTask(newTaskInput.value, newPriorityInput.value));

localStorage.setItem('projects', JSON.stringify(myProjects));

addTaskModal.close();

renderMain(event);

})
**

for (let i = 0; i < myProjects[index].tasks?.length; i++) {

const tasks = document.createElement('div');
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete Task';
deleteBtn.addEventListener('click', ()=>{
myProjects[index].tasks.splice(i, 1);
localStorage.setItem('projects', JSON.stringify(myProjects));
renderMain(event);
})

//when we want to update after delete, just store with same "key" and the "key" will be updated.


tasks.textContent = myProjects[index].tasks.name;
tasks.classList.add('tasks');
tasks.appendChild(deleteBtn);
projectCard.appendChild(tasks);

}
const addTaskBtn = document.createElement('button');
addTaskBtn.textContent = "Add Task";
mainContent.appendChild(addTaskBtn);
addTaskBtn.addEventListener('click', ()=>{

addTaskModal.showModal();

});
mainContent.appendChild(addTaskBtn);
mainContent.appendChild(projectCard)

}


</code></pre>
<p>Specifically, this is the part of the code that I'm having a problem with:</p>
<pre><code> submitNewTaskBtn.addEventListener('click', ()=>{

if (!newTaskInput.value || !newPriorityInput.value) {
alert('please enter the missing value.')
return;
}
else if (myProjects[index].hasOwnProperty('tasks') === false) { //if project has no tasks property, assign tasks property
myProjects[index].tasks =[(createTask(newTaskInput.value, newPriorityInput.value))];

localStorage.setItem('projects', JSON.stringify(myProjects));
addTaskModal.close();
renderMain(event);
}

myProjects[index].tasks.push(createTask(newTaskInput.value, newPriorityInput.value));

localStorage.setItem('projects', JSON.stringify(myProjects));

addTaskModal.close();

renderMain(event);

})


</code></pre>
<p>I'm not sure why it executes multiple times after the first submit, and the number of times doubles after every click.. 2,4,8,16 and so on. Any inputs would be very appreciated. Thank you!</p>
 

Latest posts

S
Replies
0
Views
1
Safwan Aipuram
S
Top