I apologize if this is a bit confusing to read, this is my first post. Please consider the following code:

HTML:

...
        <form>
            <input type="text" id="to-do-input" placeholder="Add new task..">
            <button id="add-to-do" type="button">Add ToDo</button>
        </form>
        <div id="to-do-container">
        </div>
...

JAVASCRIPT:

  var addButton = document.getElementById("add-to-do");
  toDoArray = [];

            addButton.addEventListener("click", function() {
                let nHTML = '';
                let todoValue = document.getElementById("to-do-input").value;
                toDoArray.push(todoValue);
                
                toDoArray.forEach( function(item) {
                    //READ BELOW
                    //<!--set each array item's id to it's own string value minus white spaces
                    var itemId = item.replace(' ','');
                    item.setAttribute("id", itemId); //console: "item.setAttribute is not a function"
                    //-->

                    nHTML  = '<li>'   item   '  <button id="delete">Remove</button> </li>';
                });
                document.getElementById("to-do-container").innerHTML = '<ul>'   nHTML   '</ul>';
                document.getElementById("to-do-input").value = '';
        });

PROBLEM: The plan is to set each array item's id value to its own string value minus all spaces via .replace(), but the console is saying:

app.js:17 Uncaught TypeError: item.setAttribute is not a function
    at app.js:17:26
    at Array.forEach (<anonymous>)
    at HTMLButtonElement.<anonymous> (app.js:14:27

I tried to also type item.setAttribute("id", ${itemId}), but that hasn't worked either.

CodePudding user response：

Javascript code:

var addButton = document.getElementById("add-to-do");
    toDoArray = [];

    addButton.addEventListener("click", function () {
        let nHTML = '';
        let todoValue = document.getElementById("to-do-input").value;
        toDoArray.push(todoValue);

        toDoArray.forEach(function (item, index) {
            //READ BELOW
            //<!--set each array item's id to it's own string value minus white spaces
            var itemId = item.replace(' ', '');
            // item.setAttribute("id", itemId); //console: "item.setAttribute is not a function"
            //--> //This line has been replaced

            nHTML  = `<li id='${itemId}'>`   item   `  <button id="delete" onclick="dltFun(${index},${itemId})">Remove</button> </li>`; //This line has been replaced
        });
        document.getElementById("to-do-container").innerHTML = '<ul>'   nHTML   '</ul>';
        document.getElementById("to-do-input").value = '';
    });

    function dltFun(index, itemId) {
        let element = document.getElementById(itemId)
        element.remove()
        toDoArray.splice(index, 1)
    }

CodePudding user response：

Fixed JavaScript code:

const addButton = document.getElementById('add-to-do');
const input = document.getElementById('to-do-input');
const toDoContainer = document.getElementById('to-do-container');
const toDoArray = [];

addButton.addEventListener('click', () => {
  toDoArray.push(input.value);

  toDoContainer.innerHTML = `<ul>${toDoArray
    .map(
      (todo) =>
        `<li id='${todo.replace(
          ' ',
          '',
        )}'>${todo}<button id="delete">Remove</button> </li>`,
    )
    .join('')}</ul>`;

  input.value = '';
});

Hope this helps.