const submitButton = document.getElementById('submit');
const toDoList = document.querySelector('.to-do');
const newListItems = [];
let itemExists = false;
submitButton.addEventListener('click', function(){
const newInput = document.getElementById('new-item').value;
newListItems.push(newInput);
const newListItem = document.createElement('li');
newListItem.classList.add('to-do-item');
const latestInputText = newListItems[newListItems.length - 1];
const latestInputNumber = newListItems.indexOf(latestInputText) + 1;
newListItem.textContent = latestInputNumber + '. ' + latestInputText;
toDoList.appendChild(newListItem);
itemExists = true;
doesExist();
});
function doesExist(){
if(itemExists){
const toDo = document.querySelectorAll('.to-do-item');
for(let i = 0; i < toDo.length; i++){
toDo[i].addEventListener('click', function(){
this.classList.add('completed');
console.log('Clicked');
console.log(this);
});
}
}
}
<div class="list">
<input type="text" id="new-item" placeholder="Add Item">
<input type="submit" value="Add" id="submit">
<ul class="to-do">
</ul>
</div>
</div>
When i click the first item that i add to my to do list i gets clicked twice, and i am a little confused why. Any item that i add after the first item works absolutely fine.
Here is a working version - explanation below:
const submitButton = document.getElementById('submit');
const toDoList = document.querySelector('.to-do');
const newListItems = [];
let itemExists = false;
submitButton.addEventListener('click', function(){
const newInput = document.getElementById('new-item').value;
newListItems.push(newInput);
const newListItem = document.createElement('li');
newListItem.classList.add('to-do-item');
const latestInputText = newListItems[newListItems.length - 1];
const latestInputNumber = newListItems.indexOf(latestInputText) + 1;
newListItem.textContent = latestInputNumber + '. ' + latestInputText;
toDoList.appendChild(newListItem);
addClickEventTo(newListItem);
});
function addClickEventTo(toDoItem){
toDoItem.addEventListener('click', function(){
this.classList.add('completed');
console.log('Clicked');
console.log(this);
});
}<div class="list">
<input type="text" id="new-item" placeholder="Add Item">
<input type="submit" value="Add" id="submit">
<ul class="to-do">
</ul>
</div>You are applying addEventListener() event each time you add a new item and it is accumulative. When you add 5 items, it'll have 5 clicks for first item, 4 clicks for 2nd item and so on. The modified code only add the addEventListener() to the created item.
<div class="list">
<input type="text" id="new-item" placeholder="Add Item">
<input type="submit" value="Add" id="submit">
<ul class="to-do"></ul>
</div>
<script>
const submitButton = document.getElementById('submit');
const toDoList = document.querySelector('.to-do');
const newListItems = [];
let itemExists = false;
submitButton.addEventListener('click', function () {
const newInput = document.getElementById('new-item').value;
newListItems.push(newInput);
const newListItem = document.createElement('li');
newListItem.classList.add('to-do-item');
const latestInputText = newListItems[newListItems.length - 1];
const latestInputNumber = newListItems.indexOf(latestInputText) + 1;
newListItem.textContent = latestInputNumber + '. ' + latestInputText;
newListItem.addEventListener('click', function () {
this.classList.add('completed');
console.log(this);
});
toDoList.appendChild(newListItem);
itemExists = true;
});
</script>