Adding items to a list and then adding click event - JavaScript

Question

Adding items to a list and then adding click event - JavaScript

Navigation

#1 by (0 votes)

0

I'm studying javascript and developing an All List .

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

My html is very simple ... This js is already a zone because I 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

asked by anonymous 15.12.2016 / 14:34

1 answer

Send audio file through wpp Create a button to exit the app

score 0 · Accepted Answer

In the example you have, I've 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>