从 HTML collection 中选择一项

Question

我正在尝试 select 推入我的数组的元素 (lis)(todos 它是一个 ul).. 当调用函数 (nu) 时，它会创建一个新的 li 并将其存储在 HTML Collection... 我希望能够 select 那些 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>

这是输出，我想为这些待办事项设置样式。！

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

Answer 1

您创建的函数确实有效，我认为您的问题在于您无法在正确的位置调用它，即在 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>

从 HTML collection 中选择一项

Choosing an item from HTML collection

javascript

html

nodelist