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?
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>You can add a 'change' event listener on the checkboxes and then apply a particular style or class to the parent element.
Add following JS code to your project:
const checkBoxes = document.querySelectorAll("#to-do-list input")
checkBoxes.forEach(checkBox => {
checkBox.addEventListener("change", function (e) {
const parentNode = e.target.parentNode
if (e.target.checked)
parentNode.style.color = "red"
else
parentNode.style.color = "black"
})
})
The way you have got it set up isn't recommended, and what I mean by that is, you have the input checkbox inside the li tag along with the text so you won't be able to change it.
This is what I would do:
<li><input type="checkbox" data-num=0/><span id="t0">text goes here</span></li>
You can notice in the checkbox I have added a data-num attribute, this will contain the global variable number which increments after adding a task. It will help to identify the span.
To set the event listener you can do this after creating the event:
checkbox.onclick = changeText(event)
function changeText(e){
let elem = e.target;
let span = document.querySelector("#t"+elem.getAttribute('data-num');
if(elem.checked)
span.innerHTML = "It is checked";
else
span.innerHTML = "It is not checked"'
}