How to gray out the text of the list items when their checkbox is checked?

How do I gray out a list item when it's checkbox is checked? The current code that I have takes the text that is typed in a textbox to a function called createNote when the add button is clicked. In the function, the text is added to a list item which is then added to an unordered list. The list item has a checkbox inside it. I want the list item to become grayed out and have a strike-through when its checkbox is checked. I cannot use jquery or other javascript libraries to do this. This is what I have currently:

    <head>
        <meta charset ="UTF-8">
        <meta name="description" content="Website">
        <title>Note Manager</title>
        <script>
            function createNote (form) {
                //Gets the text for the note from the input box
                var noteText = form.inputbox.value;
                
                //Creates the note and adds the text to it
                var note = document.createElement("li");
                note.innerHTML = noteText

                //Creates checkbox
                var noteCheck = document.createElement("input")
                noteCheck.type = "checkbox"
                noteCheck.classList.add("checkcheck")

                //Appends checkbox to the note
                note.appendChild(noteCheck)

                //Gets the unordered list and appends the note to it
                document.getElementById("abc").appendChild(note)

            }
            function grayCheckedItems(){
                //Gets the unordered list
                var list = document.getElementById("abc");

                //Gets list items from unordered list
                var listItems = list.getElementsByTagName("li");

                //Incorrect part. Needs to cycle through the list items and gray out the items that have checked checkboxes
                for(var i = 0; i < listItems.length; i++){
                    var chekbox = listItems[i].getElementsByTagName("input")
                    if(chekbox.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>

How would I do this? The current code does not gray out the list items that are checked. I tried looking online for similar problems but all of them were different because the checkbox was created by typing it out in html. In this problem, all of the checkboxes are created using javascript.



Read more here: https://stackoverflow.com/questions/64951032/how-to-gray-out-the-text-of-the-list-items-when-their-checkbox-is-checked

Content Attribution

This content was originally published by Andrew Wilson at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: