How to avoid code duplication in this Javascript code snippet

Question

I have tried to add, remove and toggle classstyles to 3 <li> s when user click on 3 buttons having ids 'add' 'delete' and 'toggle' respectively. But the codes repeat itself other than the classList method name and button id.

is there anyway i could write a function to avoid repetition?

here is my code.

document.querySelector('#add').addEventListener('click',()=>{
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList.add('listStyles');
    })
});
document.querySelector('#delete').addEventListener('click',()=>{
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList.remove('listStyles');
    })
});
document.querySelector('#toggle').addEventListener('click',()=>{
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList.toggle('listStyles');
    })
});

D. Pardal · Accepted Answer · 2020-04-06 10:38:13Z

1

You could do it like this:

function modifyClass(action) {
    document.querySelectorAll('#todos li').forEach((li)=>{
        li.classList[action]('listStyles');
    })
}

document.querySelector('#add').addEventListener('click', ()=>{ modifyClass("add") });
document.querySelector('#delete').addEventListener('click', ()=>{ modifyClass("remove") });
document.querySelector('#toggle').addEventListener('click', ()=>{ modifyClass("toggle") });

If you changed the element #delete to #remove, you could do:

for (const action of ["add", "remove", "toggle"])
    document.getElementById(action).addEventListener("click", ()=>{
        document.querySelectorAll('#todos li').forEach((li)=>{
            li.classList[action]('listStyles');
        });
    });

edited Apr 6, 2020 at 10:38

answered Apr 4, 2020 at 13:35

D. Pardal

6,6821 gold badge23 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Code Maniac Over a year ago

You can use array to remove more redundancy. +1

D. Pardal Over a year ago

Great idea, but #delete needs to be changed to #remove.

HARIKRISHNAN A K Over a year ago

i have tried the for of loop method. but the last action (in this case 'toggle') got applied to every button

D. Pardal Over a year ago

You are right. I forgot to put let or const before action, so action ended up in the global scope. I edited my question.

HARIKRISHNAN A K Over a year ago

ohh i see. i added a function inside loop and and it works now

|

Collectives™ on Stack Overflow

How to avoid code duplication in this Javascript code snippet

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related