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 >
            <input type="text" id="new-item" placeholder="Add Item">
            <input type="submit" value="Add" id="submit">
            <ul >
            </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. Any kind of help will be appreciated, Thank You !

CodePudding user response：

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 >
            <input type="text" id="new-item" placeholder="Add Item">
            <input type="submit" value="Add" id="submit">
            <ul >
            </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.

CodePudding user response：

<div >
    <input type="text" id="new-item" placeholder="Add Item">
    <input type="submit" value="Add" id="submit">
    <ul ></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>