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

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 >
        <div >
            <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 >
            <ul id="task-list">
                <li ><input type="checkbox" id="check"><span >Email David</span><button >X</button></li>
                <li ><input type="checkbox" id="check"><span >Create ideal persona guide</span><button >X</button></li>
                <li ><input type="checkbox" id="check"><span >Set up A/B test</span><button >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 ><input type="checkbox" id="check"><span >${textValue}</span><button >X</button></li>`;
        tlist.insertAdjacentHTML("beforeend", newLi);
        event.preventDefault();
    });
}

CodePudding user response：

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 ><input type="checkbox" id="check"><span >${textValue}</span><button >X</button></li>`;
        tlist.insertAdjacentHTML("beforeend", newLi);
        event.preventDefault();
}