Click here to Skip to main content
15,884,177 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have many li in an ol. And a "done" button.
I want that when I click on the button line-through the current list item with for loop or similar.

But I get an error:

Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')
at done.<computed>.onclick (li_span_div_to_do_question.html:38:34)

Does somebody have an idea?

What I have tried:

HTML
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

</head>

<body>

    <div>
        <ol>
            <li class="to_buy">Melone</li><button class="done">Done</button>
            <li class="to_buy">Apple</li><button class="done">Done</button>
            <li class="to_buy">Banana</li><button class="done">Done</button>
            <li class="to_buy">Strawberry</li><button class="done">Done</button>
        </ol>
    </div>

    <script>

        var done = document.getElementsByClassName("done");
        var li = document.getElementsByClassName("to_buy")

        let li_collection

        for (i = 0; i < li.length; i++) {
            li_collection=li[i]
        }



        for (i = 0; i < done.length; i++) {
            done[i].onclick = function () {
                li_collection[i].innerHTML.style.textDecoration="line-through"
            }
        }

        console.log(li_collection)

    </script>
</body>

</html>
Posted
Updated 24-Jul-22 4:58am
Comments
0x01AA 24-Jul-22 10:39am    
From my point of view, your assumption that done has the same length like li_collection is wrong. You adress li_collection[i] while loop over done
folza 24-Jul-22 10:45am    
How can I refer to the current li element to line-through? Do not you have a solution?
0x01AA 24-Jul-22 10:58am    
Sorry, forget my comment above. It is a static html, therefore what I wrote is not correct.

1 solution

I have added this and works:

HTML
for (i = 0; i < done.length; i++) {
    done[i].onclick = function () {
        var div = this.previousElementSibling;
        div.style.textDecoration = "line-through";
    }
}
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900