I am trying to figure out how to gray out a list item when its checkbox is checked. The code I currently have takes text input from a textbox and adds it to an unordered list when the add button is clicked. Each list item contains a checkbox within it. My goal is to have the list item become grayed out with a strike-through effect when its checkbox is checked. It's important to note that I'm not able to use jQuery or other JavaScript libraries for this solution. Here is my current code snippet:
<head>
<meta charset ="UTF-8">
<meta name="description" content="Website">
<title>Note Manager</title>
<script>
function createNote (form) {
//Get the note text from the input box
var noteText = form.inputbox.value;
//Create the note element and append the text
var note = document.createElement("li");
note.innerHTML = noteText
//Create a checkbox element
var noteCheck = document.createElement("input")
noteCheck.type = "checkbox"
noteCheck.classList.add("checkcheck")
//Append the checkbox to the note element
note.appendChild(noteCheck)
//Get the unordered list and append the note element to it
document.getElementById("abc").appendChild(note)
}
function grayCheckedItems(){
//Get the unordered list
var list = document.getElementById("abc");
//Get all list items from the unordered list
var listItems = list.getElementsByTagName("li");
//Iterate through the list items and gray out the ones with checked checkboxes
for(var i = 0; i < listItems.length; i++){
var checkbox = listItems[i].getElementsByTagName("input")
if(checkbox.checked == true){
listItems[i].classList.add("completedItem")
}
}
}
</script>
<style>
.completedItem{
color: gray;
text-decoration: line-through;
}
</style>
</head>
<body>
<form name="myform">
Enter a note: <br/>
<input type="text" name="inputbox">
<input type="button" name="button" Value="Add" onClick="createNote(this.form)">
</form>
<main>
<h2>Task List: </h2>
<ul id="abc" onchange="grayCheckedItems(this.ul)">
</ul>
</main>
</body>
I need assistance in getting the list items to be grayed out when their associated checkboxes are checked. The current implementation is not achieving this intended behavior. Online resources have not provided solutions tailored to list items created dynamically using JavaScript.