JavaScript删除线

Question

JavaScript删除线

4

我一直试图弄清楚它，但没有进展。我正在学习JavaScript，所以只是在测试如何添加一个项目到代办事项列表中，然后当您单击li项目时划掉它。

我已经能够完成所有这些，但我遇到了困难:

当我添加一个新的列表项时，我用于划掉它的函数不起作用。我不知道怎么解决它？

var input = document.getElementById("input");
var btn = document.getElementById("btn");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");


function getLength() {
  return input.value.length;
};

function createElement() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
};


function click() {
  if (getLength() > 0) {
    createElement();
  }
};


function keyPress() {
  if (getLength() > 0 && event.which === 13) {
    createElement();
  }
};

function strikeThrough(item) {
  item.addEventListener("click", function() {
    item.classList.toggle("done");
  })
};

li.forEach(strikeThrough);

btn.addEventListener("click", click);
input.addEventListener("keypress", keyPress);

<!DOCTYPE html>

<html>

<head>
  <title>WORK TO DO LIST</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1>LIST OF THINGS TO COMPLETE</h1>
  <input id="input" type="text" placeholder="Enter">
  <button id="btn">Enter</button>
  <ul>
    <li>This is a starter</li>
  </ul>
  <script type="text/javascript" src="actions.js"></script>
</body>

</html>

- Holly

“it doesn't actually get added to my array” 是什么意思？你尝试过什么来调试它？ - Nico Haase

对不起，我是新手，正在努力学习。本质上，问题在于当我添加一个新的列表项时，我的划掉函数无法正常工作。我不知道该如何解决它？ - Holly

我已经编辑了问题，因为我意识到了我的错误。 - Holly

那么，你找到错误了吗？或者缺少什么东西？请进一步编辑问题以进一步解释。 - Nico Haase

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 0stone0 · Accepted Answer

.done 类没有任何与之关联的样式，您应该添加一些 CSS 样式，以便元素使用 strike-trough；

.done {
  text-decoration: line-through;
}

在创建一个新的<li>元素后，你需要再次调用strikeThrough()函数并添加事件监听器，所以在createElement()函数内部实现：

...
ul.appendChild(li);
input.value = "";
strikeThrough(li);

strikeThrough() 函数接受一个参数，在 foreach 循环中应传递元素，而不是依赖全局变量。

// Old
li.forEach(strikeThrough);

// New
li.forEach((e) => {strikeThrough(e); });

var input = document.getElementById("input");
var btn = document.getElementById("btn");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");


function getLength() {
  return input.value.length;
};

function createElement() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  ul.appendChild(li);
  input.value = "";
  strikeThrough(li);
};


function click() {
  if (getLength() > 0) {
    createElement();
  }
};


function keyPress() {
  if (getLength() > 0 && event.which === 13) {
    createElement();
  }
};

function strikeThrough(item) {
  item.addEventListener("click", function() {
    item.classList.toggle("done");
  })
};

li.forEach((e) => {strikeThrough(e); });

btn.addEventListener("click", click);
input.addEventListener("keypress", keyPress);

.done {
  text-decoration: line-through;
}

<!DOCTYPE html>

<html>

<head>
  <title>WORK TO DO LIST</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1>LIST OF THINGS TO COMPLETE</h1>
  <input id="input" type="text" placeholder="Enter">
  <button id="btn">Enter</button>
  <ul>
    <li>This is a starter</li>
  </ul>
  <script type="text/javascript" src="actions.js"></script>
</body>

</html>