Can't create “a” element on clicking and subsequently classList.toggle() not working
Question
I am making a to-do list application. You enter an item. It gets appended to the list. On clicking the item on the list, it gets crossed. Can't make the text clickable and thus can't add the classList.toggle() function to cross the item from the list.
I've tried to create an empty "li" element to which an "a" element is created inside it. (Note: all this happens when we add the item to the list). I thought, using the "a" element, I could hover over the text and thus make it clickable and connect it to the classList.toggle() function.
<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>
The expected output should be that, if the user add: "Do Laundry" to the list, It gets added to the list. On clicking "Do Laundry", there should be line through it, ie it should be crossed. Currently, the items are getting added, but are not getting crossed. No error message is showing up either.
2 answers
solution1
1 2019-05-31 07:22:58
While adding new li inside ul you need to bind addEventListener in new element, then on element click you need to add done class in to that element.
Try this:
<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>
solution2
1 ACCPTED 2019-05-31 07:25:32
I have made it work very similar to the answer from Saurabh with the following:
<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>
In the above example in your question you had spelt getElementById wrong in one place and you did not define ul. I also added the toggle function to add to the click event you need to create.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.