Formula adding and removing classes JS

Question

I've been trying to make a formula that adds or removes classes from DOM.

const short is just an example of what I am struggling with. In the code you can meet this error with

export const hideNonIlluminated

import myDOMelement from './dom-element.js';
import { short, long, all, LMDChoice, LMSChoice, LMSMChoice, hideNonIlluminated, hideIlluminated, powerLEDClass, normalLEDClass } from './utility-variables.js';

export const short = [
    {
        elementId: "short-sides",
        action: "add",
        className: "active"
    },
    {
        elementId: "long-sides",
        action: "remove",
        className: "active"
    },
    {
        elementId: "all-sides",
        action: "remove",
        className: "active"
    },
];

I believe that there is some kind of reference problem in import/export...

const addRemoveClasses = element => {
    element.forEach(({ elementId, className, action }) => myDOMelement[elementId].classList[action](className));

};

myDOMelement['short-sides'].addEventListener("click", () => addRemoveClasses(short));

How shall I make it work?

myDOMelement looks like this:

const x = ['height', 'width', 'single-sided', 'double-sided', 'wp', 'print-price', 'power-led', 'normal-led', 'support', 'support-choice', 'long-sides', 'short-sides', 'all-sides', 'choice-with-print', 'choice-without-print', 'illuminated', 'non-illuminated', 'LMD', 'LMS', 'LMSM', 'DTF', 'STF', 'STFL'];

const funGetX = () => {
    return x.reduce((acc, classX) => {
        acc[classX] = document.getElementById(classX);
        return acc;
    }, {});
}

const myDOMelement = funGetX();

export default myDOMelement;

here is the github repo: https://github.com/kapek/adsystem.git

script.js:127 Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
at script.js:127:38
at Array.forEach (<anonymous>)
at addRemoveClasses (script.js:123:10)
at HTMLButtonElement.<anonymous> (script.js:216:61)

Answer 1

If this is what you're after, I think you just need to modify the way you reference the target element...

... document.querySelector(`#${elementId}`).classList[action](className));

 const short = [{ elementId: "this", action: "add", className: "active" }, { elementId: "that", action: "remove", className: "active" }, { elementId: "other", action: "remove", className: "active" }, ]; const addRemoveClasses = element => { element.forEach(({ elementId, className, action }) => document.querySelector(`#${elementId}`).classList[action](className)); }; document.querySelector('button').addEventListener("click", () => addRemoveClasses(short));

 div { padding: 10px; border: 1px solid #222; }.active { background: yellow; }

 <div id='this'>This</div> <div id='that' class='active'>That</div> <div id='other' class='active'>Other</div> <button>test</button>

Answer 2

    const addRemoveClasses = element => {
    element.forEach(({ elementId, className, action }) => myDOMelement[elementId].classList[action](className));

};

My code works just fine. The reason I was getting an error is because in utility-modules.js I had misspelled "iluminated" instead of "illuminated".