I am training the basics of Javascript and need help in a To-Do List

Asked

Viewed 131 times

1

I’m a Javascript beginner and I tried to make a To-Do List. Basically, it is a code that creates an item within an unordered list using the text inserted in an input. I was successful in the process of creating the list items, but I had the idea of creating a function that removes the items from the list, and that’s where the problem started. I tried to make it a "remove button" (in quotes because it is actually a tag with href="javascript:functionDemove()") for each item in the list (which when clicked would remove the item to which it is associated and itself)but what happens is that when I click on any remove button, always the last item is removed and the other remove buttons stop working.

My code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>To-Do List</title>
    </head>
    <body>
        <h1>To-Do List:</h1>
        <br>
        <input type="text" placeholder="Insira aqui os seus afazeres" id="itemLista">
        <button onclick="addTarefa()">Adicionar tarefa</button>
        <br>
        <ul id="ul">
        </ul>
        <script src="script.js"></script>
    </body>
</html>

Javascript

var itemLista = document.getElementById("ul");
function addTarefa() {
    if (document.getElementById("itemLista").value !== "") {
        var tarefa = document.createElement("li");
        tarefa.innerHTML = document.getElementById("itemLista").value;
        itemLista.appendChild(tarefa);
        document.getElementById("itemLista").value = "";
        var remover = document.createElement("a");
        window.removerTarefa = function () {
            itemLista.removeChild(tarefa);
            itemLista.removeChild(remover);
        }
        remover.innerHTML = "Remover";
        remover.setAttribute("href", "javascript:removerTarefa()");
        itemLista.appendChild(remover);
    }
}
javascript list

2 answers

1


This way that you implemented your function is not very orthodox, you are declaring the function removerTarefa in the global scope dynamically and then assigning the reference of this function to the button remover.

The problem is that there can only be one symbol (function or variable) with a given name in a scope, each time you invoke the function addTarefa, you create a new function removerTarefa in the overall scope overriding the removerTarefa old. When invoking removerTarefa, you are invoking the last created function, which will remove the last item from the list, and if that item has already been removed, this is an error.

There is no need to declare this function to remove the element from the list in the global scope, you can declare it anonymously and assign it to property onclick of its element as in the code below, so nothing is overwritten:

var itemLista = document.getElementById("ul");
function addTarefa() {
    if (document.getElementById("itemLista").value !== "") {
        var tarefa = document.createElement("li");
        tarefa.innerHTML = document.getElementById("itemLista").value;
        itemLista.appendChild(tarefa);
        
        var remover = document.createElement("a");
        remover.innerHTML = "Remover";
        remover.setAttribute("href", "javascript:;"); // apenas para parecer um link
        remover.onclick = function() {
            itemLista.removeChild(tarefa);
            itemLista.removeChild(remover);
        }
        itemLista.appendChild(remover);
        
        document.getElementById("itemLista").value = "";
    }
}
<!DOCTYPE html>
<html>
    <head>
        <title>To-Do List</title>
    </head>
    <body>
        <h1>To-Do List:</h1>
        <br>
        <input type="text" placeholder="Insira aqui os seus afazeres" id="itemLista">
        <button onclick="addTarefa()">Adicionar tarefa</button>
        <br>
        <ul id="ul">
        </ul>
        <script src="script.js"></script>
    </body>
</html>

  • Thanks! When I went to sleep, I touched this problem of the superscript, and had even thought of a gambiarra with array to solve , but this way is much easier.

0

The @user140828 answer is right, it fixes code issues and correctly adds/removes items.

I would just like to make a suggestion upon his reply, which would be to add the link that removes within the element itself <LI>. With this, we have to remove only one element, it becomes simpler, and does not break the layout:

var itemLista = document.getElementById("ul");
function addTarefa() {
    if (document.getElementById("itemLista").value !== "") {
        var tarefa = document.createElement("li");
        tarefa.innerHTML = document.getElementById("itemLista").value;
        
        var remover = document.createElement("a");
        remover.innerHTML = "Remover";
        remover.setAttribute("href", "javascript:;"); // apenas para parecer um link
        remover.onclick = function() {
            // remove apenas "tarefa", que é o li
            itemLista.removeChild(tarefa);
        }

        // adiciona o link de remover ao li
        tarefa.appendChild(remover);
        // adiciona o li ao ul
        itemLista.appendChild(tarefa);
        document.getElementById("itemLista").value = "";
    }
}
a {
  margin: 0 5px
}
<h1>To-Do List:</h1>
<br>
<input type="text" placeholder="Insira aqui os seus afazeres" id="itemLista">
<button onclick="addTarefa()">Adicionar tarefa</button>
<br>
<ul id="ul"></ul>

  • I’ll use it! I wanted to do it like this at first, but I did it wrong and I didn’t realize it, so I gave up doing it like this.

Browser other questions tagged javascript list

You are not signed in. Login or sign up in order to post.