时间戳

首页 > 解决方案 > Javascript 删除线

javascript - Javascript 删除线

问题描述

我一直在试图弄清楚，但没有得到任何地方。我是学习 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>

标签： javascriptarrays

解决方案

该类.done没有与之关联的任何样式，您应该添加一些 css 以便元素获得罢工低谷；

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

创建一个新的后<li>，您应该strikeThrough()再次调用该函数并添加事件侦听器，因此在createElement()函数内部：

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

除了参数之外的strikeTrough()函数，您应该在 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>

推荐阅读