Javascript, append node adds whole array instead of last element

Question

So I'm still learning javascript and for my first to do list project I've gotten to the point where I can add the array to the HTML page but instead of taking the last element and adding it it adds the whole array to each line. How do I change it so only the last element is added instead?

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Task Tracker</title>
    <link rel="stylesheet" type="text/css" href="todo.css">
    <script type="text/javascript" src="todo.js"></script>
</head>
<body>
    <div>
        <p>Task Manager</p>
        <input type="text" name="submitButton" id="userInput">
        <button onclick=addTask()>Enter</button>
    </div>
    <div>
        <h3>Task</h3>
        <div id='taskList'>
            <ul id="myList">
                
            </ul>
        </div>
    </div>
</body>
</html>

JavaScript

let Task = [];

function addTask(){
    var newTask = document.getElementById("userInput").value;
    Task.push(newTask);
    updateTaskList();
};

function updateTaskList(){
    var node = document.createElement('LI');
    var textNode;
    for (let i = Task.length - 1; i >= 0; i -= 1){
        textNode = document.createTextNode(Task[i]);
        console.log(Task[i]);
        node.appendChild(textNode);
        document.getElementById("myList").appendChild(node);
    }
}

Nate Simonsen · Accepted Answer · 2021-03-24 23:31:45Z

Instead of using two functions, you can combine this into one function, the code would look like this

      function addTask() {
        let node = document.createElement("li");
        let textNode = document.createTextNode(
          document.getElementById("userInput").value
        );
        node.appendChild(textNode);
        document.getElementById("myList").appendChild(node);
      }

As an aside, it is best not to use the var keyword anymore and replace it with let, (or if you aren't reassigning it, const) because let is block-scoped (most of the time it doesn't matter, but var can have weird issues)

As a bonus, you could figure out how to remove an list item when the user clicks the list item and add an edit button that lets them edit them

Another good thing would be to set a localStorage array to keep the data of the website so when the user reloads it saves their list items

If you want to get really advanced, you would set up a backend database and set up user authentication

If you want to get deeper into coding/javascript, I strong suggest udemy courses (only when they are on sale though)

Hope this helps and happy coding!!

Maurice · Accepted Answer · 2021-03-24 23:24:34Z

1

Your updateTaskList function is always going through all tasks in the task list (by the for loop).

If you want only the last element to be added, you either

write an additional function, that adds a single element to the DOM and which you will then call inside your loop and inside your addTask function (in this case you would not call the updateTaskListfuntion from your addTask function)

or

remove all existing tasks from the DOM and then add all tasks of the updated list (as you do now)

answered Mar 24, 2021 at 23:24

Maurice

3572 silver badges6 bronze badges

Comments

andellapie · Accepted Answer · 2021-03-24 23:34:00Z

1

In updateTaskList, you append each time all tasks to new created LI element. Try appending only last Task.

function updateTaskList(){
    var node = document.createElement('LI');
    var textNode;
    var lastTaskIndex = Task.length - 1;
    textNode = document.createTextNode(Task[lastTaskIndex]);
    console.log(Task[lastTaskIndex]);
    node.appendChild(textNode);
    document.getElementById("myList").appendChild(node);
}

answered Mar 24, 2021 at 23:34

andellapie

1762 bronze badges

Collectives™ on Stack Overflow

Javascript, append node adds whole array instead of last element

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related