I have create this toggle menu for mobile device using javascript but this is not working

Question

I have create this toggle menu for mobile device using javascript but this is not working

const selectElement = (s) => document.querySelector(s);
selectElement(s: '.open').addEventListener('click', () => {
    selectElement(s:'nav-list').classList.add('active');
});
selectElement(s:'.close').addEventListener('click', () => {
    selectElement(s:'nav-list').classList.remove(tokens:'active');
});

Answer 1

It looks like you have some extra colons in your query parameters. You don't need the s: unless you're passing in the parameters as an object.

You can either remove the extra object notation:

const selectElement = (s) => document.querySelector(s);
selectElement('.open').addEventListener('click', () => {
    selectElement('nav-list').classList.add('active');
});
selectElement(close').addEventListener('click', () => {
    selectElement('nav-list').classList.remove('active');
});

or add brackets around the function selectElement 's parameter and turn it into object destructuring:

const selectElement = ({ s }) => document.querySelector(s);
selectElement({ s: '.open' }).addEventListener('click', () => {
    selectElement({ s: 'nav-list' }).classList.add('active');
});
selectElement({ s: '.close' }).addEventListener('click', () => {
    selectElement({ s: 'nav-list' }).classList.remove('active');
});

I'd recommend the first option as using objects for function parameters only really helps when you have multiple parameters that you're trying to keep track of.

In either case you'd want to remove tokens: from the classList.remove() function