Issue
so below is my code for the Ul and Li elements.
<ul id = "to-do-list" >
<li> <input type="checkbox"> to school</li>
<li> <input type="checkbox"> do website</li>
</ul>
it is for a To do list: code for js function to add task items is below as well.
document.getElementById("submit-task").onclick = function (){
let li = document.createElement("li");
let text = document.getElementById("task").value;
let checkbox = document.createElement("input");
checkbox.type ="checkbox";
checkbox.value = text;
checkbox.checked = false;
li.appendChild(checkbox);
let textnode = document.createTextNode(text);
li.appendChild(textnode);
if (text === ''){
alert("There is no task entered");
}
else{
document.getElementById("to-do-list").appendChild(li);
}
document.getElementById("task").value="";
};
I want to change the li text if a checkbox is checked. how can I do this?
Solution
Though DCR's solution is good, it doesn't work if the input gets unchecked. Here's a little modification that i've made, hope it will solve the problem!
function changeOnChecked(){
const a = event.target.closest('input').checked;
if(a)
event.target.closest('li').style.color='red'
else
event.target.closest('li').style.color='black'
}
<ul id = "to-do-list" >
<li> <input type="checkbox" onclick="changeOnChecked()"> to school</li>
<li> <input type="checkbox" onclick="changeOnChecked()"> do website</li>
</ul>
Answered By - Grek
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.