Home Why is the text value duplicating when clicking on the add button JavaScript

Questions

Why is the text value duplicating when clicking on the add button JavaScript

January 31, 2022

I’m doing a basic To-Do List project where the value from the text input must be added to a unordered list containing all the attributes of 3 hardcoded list items.

I’ve gotten so far as to add the value from the input field to the list but every task after that duplicates. I’ll add the code below. I’m fairly new to programming so excuse the code lol. Thanks in advance.

<body>
    <div class="todo-area">
        <div class="add-area">
            <h1 id="list-name">To-Do List</h1>
            <label for="todo"></label>
            <input type="text" name="todo" id="input-task">
            <button type="submit" id="add-task-button" onclick="add()">Add Task</button>
        </div>
        <div class="list-area">
            <ul id="task-list">
                <li class="li-input"><input type="checkbox" id="check"><span class="task">Email David</span><button class="delete-btn">X</button></li>
                <li class="li-input"><input type="checkbox" id="check"><span class="task">Create ideal persona guide</span><button class="delete-btn">X</button></li>
                <li class="li-input"><input type="checkbox" id="check"><span class="task">Set up A/B test</span><button class="delete-btn">X</button></li>
            </ul>
        </div>
    </div>
    <script src="app.js"></script>
</body>

function add(){
    document.getElementById("add-task-button").addEventListener("click", function (event) {
        let textValue = document.getElementById("input-task").value;
        let tlist = document.getElementById("task-list");
        let newLi = `<li class="li-input"><input type="checkbox" id="check"><span class="task">${textValue}</span><button class="delete-btn">X</button></li>`;
        tlist.insertAdjacentHTML("beforeend", newLi);
        event.preventDefault();
    });
}

>Solution :

Every time you click the button you are adding a NEW event listener to the button which will add your new item.

A simple fix is to not add the event listener as your onClick in your button element already causes that add function to run on click.

Essentially replace the JS with:

function add(){
        let textValue = document.getElementById("input-task").value;
        let tlist = document.getElementById("task-list");
        let newLi = `<li class="li-input"><input type="checkbox" id="check"><span class="task">${textValue}</span><button class="delete-btn">X</button></li>`;
        tlist.insertAdjacentHTML("beforeend", newLi);
        event.preventDefault();
}