Выбор элемента из коллекции HTML - PullRequest
Новая
       11

Выбор элемента из коллекции HTML

0 голосов
/ 22 января 2019

Я пытаюсь выбрать элементы (lis), которые помещаются в мой массив (todos , это ul ) .. Когда вызывается функция (nu), она создает новый li и сохраняет егов коллекции HTML ... Я хочу иметь возможность выбрать те li для стиля. 

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()

Я пытался сделать это 

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

по-прежнему не работает: /..

вот мой 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>

И это вывод, я хочу стилизовать эти задачи.!

output

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

1 Ответ

0 голосов
/ 22 января 2019

Созданная вами функция действительно работает, я думаю, что ваша проблема связана с тем, что вы не смогли вызвать ее в нужном месте, а именно в input.addEventListener.Вот рабочий пример: 

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>
...