Question

我正在做一个待办事项清单应用程序。您输入一个项目。它被追加到列表中。单击列表上的项目后，该项目就会被划掉。无法使文本可点击，因此无法添加classList.toggle（）函数来越过列表中的项目。

我试图创建一个空的“ li”元素，并在其中创建一个“ a”元素。（注意：所有这些都会在我们将商品添加到列表中时发生）。我想，使用“ a”元素，我可以将鼠标悬停在文本上，然后使其可单击并将其连接到classList.toggle（）函数。

<html>
<head>
   <style>
   .done
   {
       text-decoration:line-through;
   }
   </style>
</head>
<body>
<input type="text" id="user_input">
<ul></ul>

<script>

var input = document.getElemenyById("user_input");

function addingNewList()
{
    var li = document.createElement("li");
    var tag = document.createElement("a"); 
    tag.appendChild(document.createTextNode(input.value)); 

    li.appendChild(tag);
    ul.appendChild(li);

    tag.onclick=tag.classList.toggle("done");
}
function input_length()
{
    return input.value.length;
}
input.addEventListener("keypress",function(event) 
{
    if(input_length() >0 && event.which == 13)
    {
        addingNewList();
    }
})
</script>
</body>
</html>

如果用户在列表中添加：“ Do Laundry”，则预期输出应为：将其添加到列表中。点击“洗衣服”时，应该有一条线穿过，即应该划线。当前，正在添加项目，但没有交叉。也没有错误消息出现。

Answer 1

在li内添加新的ul时，您需要将addEventListener绑定到新元素中，然后单击元素时，需要在该元素中添加done类。 / p>

尝试一下：

<html>
<head>
   <style>
   .done {
       text-decoration:line-through;
   }
   </style>
</head>
<body>
<input type="text" id="user_input">
<ul id="list"></ul>

<script>
var input = document.getElementById("user_input");

function addingNewList() {
	var li = document.createElement("li");
	var tag = document.createElement("a");
	tag.appendChild(document.createTextNode(input.value));

	li.appendChild(tag);

	li.addEventListener("click", function (event) {
  	event.target.classList.add('done');
	})

	var ul = document.getElementById("list");
	ul.appendChild(li);

	// tag.onclick=tag.classList.toggle("done");
}

function input_length() {
	return input.value.length;
}
input.addEventListener("keypress", function (event) {
	if (input_length() > 0 && event.which == 13) {
		addingNewList();
	}
})
</script>
</body>
</html>

Answer 2

我通过以下方式使它的工作方式与索拉卜的答案非常相似：

<html>
<head>
   <style>
   .done
   {
       text-decoration:line-through;
   }
   </style>
</head>
<body>
<input type="text" id="user_input">
<ul id="list"></ul>

<script>

var input = document.getElementById("user_input");

function addingNewList()
{
  var li = document.createElement("li");
  var tag = document.createElement("a"); 
  tag.appendChild(document.createTextNode(input.value));

  var ul = document.getElementById("list");

  li.appendChild(tag);
  ul.appendChild(li);

  tag.addEventListener("click",function() 
  {
    toggleClass(this);
  })
}

function toggleClass(e) {
  e.classList.toggle("done");
}

function input_length()
{
    return input.value.length;
}
input.addEventListener("keypress",function(event) 
{
    if(input_length() >0 && event.which == 13)
    {
        addingNewList();
    }
})
</script>
</body>
</html>

在上面的问题示例中，您将getElementById拼写错误放在一个位置，并且未定义ul。我还添加了切换功能，以将其添加到您需要创建的click事件中。

单击时无法创建“ a”元素，随后classList.toggle（）无法正常工作

2 个答案: