Search code examples
javascripthtmlnodelist

Choosing an item from HTML collection

I'm trying to select the elements(lis)that are pushed into my array(todos its a ul).. when the function (nu) is called it creates a new li and stores it in an HTML Collection... I want to be able to select those li for styling.

var input = document.querySelector("#input");
var todos = [];
var list = document.getElementById("list");
var lis = document.getElementsByTagName("li")
var btns = document.querySelectorAll("button")

function nu() {
    input.addEventListener("change", function () {
        todos.push(input.value)
        list.innerHTML += "<li>" + input.value + "</li>"
        input.value = ""
    })
    return list;
}

function alo() {

    for (i = 0; i < todos.length; i++) {
        lis.item(i).addEventListener("click", function () {
            alert("alo")
        })
    }
}

function disp() {
    todos.forEach(i => {
        list.innerHTML += "<li>" + i + "</li>"
    });
    return list;
}

disp()
nu()

I tried to do this

function silly() {
    for (i = 0; i < lis.length; i++) {
        lis[i].addEventListener("click", function () {
             alert("working")
        })
    }
}

still doesn't work :/..

here is my html

<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="new.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>New To-do!</title>
</head>

<body>
    <div class="container">
        <h1>MY TO-DO</h1>

        <input type="type" placeholder="New TO-DO" id="input">
        <ul id="list">

        </ul>

    </div>

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

</html>

And this is the output, I want to style those todos.!

output

JSFiddle : https://jsfiddle.net/cytjae3z/

Solution

  • The function you created actually works, I think your problem comes from the fact that you weren't able to call it in the right place, that being in the input.addEventListener. Here is a working example :

    var input = document.querySelector("#input");
var todos = [];
var list = document.getElementById("list");
var lis = document.getElementsByTagName("li")
var btns = document.querySelectorAll("button")

function nu() {
  input.addEventListener("change", function() {
    todos.push(input.value)
    list.innerHTML += "<li>" + input.value + "</li>"
    input.value = ""
    silly()
  })
  return list;
}

function alo() {

  for (i = 0; i < todos.length; i++) {
    lis.item(i).addEventListener("click", function() {
      alert("alo")
    })
  }
}

function disp() {
  todos.forEach(i => {
    list.innerHTML += "<li>" + i + "</li>"
  });
  return list;
}

function silly() {
  for (i = 0; i < lis.length; i++) {
    lis[i].addEventListener("click", function() {
      this.style.backgroundColor = "#" + ((1 << 24) * Math.random() | 0).toString(16)
    })
  }
}

disp()
nu()
    <div class="container">
  <h1>MY TO-DO</h1>

  <input type="type" placeholder="New TO-DO" id="input">
  <ul id="list">

  </ul>

</div>