Adding items to a list and adding click event next - Javascript

Asked

Viewed 400 times

0

I’m studying and developing a Todo List.

The only thing I want to do is add elements to a <ul> and then enable them to click to just change their class.

Man html which is very simple... js is already a zone because I’ve tried everything and nothing works...

var addBtn = document.querySelector("button");
var inputText = document.getElementsByTagName("input").value;
var inputT = document.getElementById("addLista");
var listaCompleta = document.querySelector("#listaCompleta");
var itensLista = document.getElementsByClassName("notDone");

function updateLista (lista){
    return lista
}
var listaOk = updateLista(itensLista)

addBtn.addEventListener("click", function () {
    var liAdd = document.getElementById("addLista").value;    
    if (liAdd !== "") {
        var liNova = document.createElement("li");
        liNova.textContent = liAdd;
        liNova.classList.add("notDone");
        listaCompleta.appendChild(liNova);
        liLength = itensLista.length
        console.log(liLength);     
        itensLista = document.getElementsByTagName("li");
    }
    inputT.value = "";
    listaOk = updateLista(itensLista)
});

function click (listaOk){
for( var i = 0; i <= listaOk.length; i++){   
    if(listaOk[i]){
        listaOk[i].addEventListener("click", function(){
       this.classList.toggle("done");
            })
    }
}
}

click(listaOk);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link type ="text/css" rel="stylesheet" href="todoStyle.css">
    <title>Todo Dom</title>
</head>
<body>
    <h1>Todo List</h1>
    <div class="central">
       <form action="">
           Adicione um Item: <input type="text" id="addLista" name="addLista"> <button type="button">add</button></form>   
        <ul id="listaCompleta">
        
        
        </ul>
    </div>



    
    
    <script type="text/javascript" src="todoJs.js"></script>
</body>
</html>

Thanks!

javascript html dom

1 answer

0


In the example you have, I added the classes (which changes the colors of the item from red to blue) and a function called atualizarEvento, which adds the click event to the last item added in the list, which is invoked after adding the element:

var addBtn = document.querySelector("button");
var inputT = document.getElementById("addLista");
var listaCompleta = document.querySelector("#listaCompleta");
var itensLista = document.getElementsByClassName("notDone");

addBtn.addEventListener("click", function() {
  var liAdd = document.getElementById("addLista").value;
  if (liAdd !== "") {
    var liNova = document.createElement("li");
    liNova.textContent = liAdd;
    liNova.classList.add("notDone");
    listaCompleta.appendChild(liNova);
    liLength = itensLista.length
    itensLista = document.getElementsByTagName("li");
  }
  inputT.value = "";
  atualizarEvento();
});

function atualizarEvento() {
  var lis = document.getElementById("listaCompleta").getElementsByTagName("li");

  lis[lis.length - 1].addEventListener("click", function() {
    this.classList.toggle("done");
  })

}
.done {
  color: red !important;
}
.notDone {
  color: blue;
}
<h1>Todo List</h1>
<div class="central">
  <form action="">
    Adicione um Item:
    <input type="text" id="addLista" name="addLista">
    <button type="button">add</button>
  </form>
  <ul id="listaCompleta">
  </ul>
</div>

  • Thank you so much for the answer, buddy. It really worked. I just wish I knew what was wrong with my logic using "for".

  • Actually I didn’t quite understand the way you were trying to do it, and using for will repeat the addEventListener with each item addition (which may cause some errors) - so I left it that way to add the listener to the last item added.

  • @Brunot, if the answer answered you can mark as accepted :)

Browser other questions tagged javascript html dom

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