silvercarpet

I’ve had success with the to-di list provided by Md Abdullah Al Fahad, but I’m having trouble getting more than one list to work, even if they’re on different pages of my site.

I’ve changed the name of the list in the first line of code so they say

<ul id="shopping-list">

and then

<ul id="shopping-list2">

and also changed the code on in the <script> section to

const list = document.getElementById('shopping-list');

and

const list = document.getElementById('shopping-list2');

but the lists all mix together. If I cross something out on shopping-list it also gets crossed out on shopping-list2.

Is there a simple way I can just change something in the code to allow multiple lists on the same page?

I used the code below by Md Abdullah Al Fahad but it doesn’t work at. Nothing gets crossed out on either list.

<ul class="shopping-list">
<li>Option One</li>
<li>Option Two</li>
<li>Option Three</li>
<li>Option Four</li>
</ul>

<ul class="shopping-list">
<li>Second List Option One</li>
<li>Second List Option Two</li>
<li>Second List Option Three</li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.shopping-list').forEach((list, listIndex) => {
const storageKey = checkedItems_${listIndex};
const savedState = JSON.parse(localStorage.getItem(storageKey) || '{}');

list.querySelectorAll('li').forEach((item, itemIndex) => {
// Restore saved state
if (savedState[itemIndex]) {
item.style.textDecoration = 'line-through';
}

// Handle clicks
item.addEventListener('click', () => {
const isChecked = item.style.textDecoration === 'line-through';
item.style.textDecoration = isChecked ? 'none' : 'line-through';
savedState[itemIndex] = !isChecked;
localStorage.setItem(storageKey, JSON.stringify(savedState));
});
});
});
});
</script>

<style>
.shopping-list li {
cursor: pointer;
transition: 0.2s;
}
.shopping-list li:hover {
color: #0073aa;
}
</style>

I fixed it. I just turned off “Defer Render-blocking JS” which I’d turned on to speed the site up but I’d rather have the menu working!

Thanks for that. If the arrows were easier to tap that would be easier yes, ideally I want to make the whole text tappable but anything to make it easier is good.

The arrows seem a little too close to the text so I could just put a space at the end of each word I suppose.

Thanks Samuel, that’s what I saw. I did have Alt tags in my image but they were after the lazy load version of the image was being loaded which didn’t have alt tags.