JavaScript删除线

问题描述 投票:1回答:1

我一直在努力弄清楚,但什么都没有。我是Java语言的新手,所以我只是在测试如何将项目添加到待办事项列表中,然后单击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>
javascript arrays
1个回答
0
投票

您未将任何元素传递给strikeThrough函数。将呼叫更改为:

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

此外,在切换.done类之后,您应该添加一些css,以使元素获得删除线;

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

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

strikeThrough(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 = "";
  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>
热门问题
推荐问题
最新问题