Question

我正在尝试选择要插入到我的数组中的元素（lis）（待办事项 it 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/

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集合中选择一个项目

1 个答案: