Help passing multiple classes from one module to another

Help passing multiple classes from one module to another
0

#1

Hi everyone,

I am currently trying to get my head around ES6 classes and modular javascript.

I have a test function I am trying to run that will loop through the classlist of a dom element and return true/false values for variables a,b,c depending on the classes. I have code that will do as I want but as I try to modularise it it does not give me the expected results.

Here are the files:

main.js

import { test, a, b, c } from './_test.js';

    const el = document.getElementById('test');
    const carouselClasses = el.classList;

      carouselClasses.forEach((item) => {
        test(item);
      });

console.log(`a = ${a}`);
console.log(`b = ${b}`);
console.log(`c = ${c}`);

// HTML
// 1.
// <div id="test" class="item-a-true item-b-false"></div>
// Should return a=true b=false c=true

// 2.
// <div id="test" class="item-c-false item-b-true"></div>
// Should return a=true b=true c=false

_test.js

> let a = true;
> let b = true;
> let c = true;
> 
> // initiate the carousel based on true | false variants applied by the author
> const test = (item) => {
>     // detect whether carousel settings are set to true | false based on variant on the carousel
>     const trueFalseSetting = /^item-(a|b|c)-(true|false)/gm;
>     const trueFalselSettings = trueFalseSetting.exec(item);
> 
>     if (trueFalselSettings) {
>         switch (trueFalselSettings[1]) {
>             case 'a':
>                 a = JSON.parse(trueFalselSettings[2]);
>                 return a;
> 
>             case 'b':
>                 b = JSON.parse(trueFalselSettings[2]);
>                 return b;
> 
>             case 'c':
>                 c = JSON.parse(trueFalselSettings[2]);
>                 return c;
> 
>             default:
>         }
>     }
> };
> 
> export { test, a, b, c };

Whenever run this javascript it returns a=true, b=true, c=true. Any ideas why this is? What am I doing wrong?


#2

You’re exporting test1 but it doesn’t exist, you should export test. That’s why a, b and c always stays true. I’m also having a hard time with your variables names, where REGEXsetting and REGEXsettingTrueFalse comes from?


#3

Because item is never passed to your test function? You need to pass it to test() as a param, as I think it may not be in scope for the called function.


#4

Hello, thanks for the response. I’ve passed in item as a param, I’ve ammended the code above, but I’m still not getting the correct output.


#5

Hello, thanks for responding. I’ve gone through and fixed the issues with variables being named incorrectly. However the output is still all true in this case.


#6

You don’t need the # when you’re grabbing an element by id:

const el = document.getElementById('test');

Since getElementById returns only one element, you can’t get it.

const carouselClasses = el.classList;

#7

Cool, thanks again. I’ve added your suggestion but I’m still getting the same output?


#8

How are you running your code?


#9

What about throwing a console.log() within your test function, just after the regex has been run? See what you’re actually getting for trueFalseSettings in every case.


#10

Try to declare your variables this way, (you can remove them from the import and export statements):

global.a = true;
global.b = true;
global.c = true;

In any case this is not structured right. Depending on how you’re running your code it should work as it is (for example with webpack). In any case it isn’t ideal, it is best if the test function return everything the main file needs.


#11

I was compiling the JS files with webpack.

In any case I managed to get the code doing what I wanted with your suggestions.

modules/test.js

let a = true;
let b = true;
let c = true;

const test = (item) => {
  const trueFalseSetting = /^item-(a|b|c)-(true|false)/gm;
  const trueFalselSettings = trueFalseSetting.exec(item);

  if (trueFalselSettings) {
    switch (trueFalselSettings[1]) {
      case 'a':
        a = JSON.parse(trueFalselSettings[2]);
        break;

      case 'b':
        b = JSON.parse(trueFalselSettings[2]);
        break;

      case 'c':
        c = JSON.parse(trueFalselSettings[2]);
        break;

      default:
    }
  }
};

export { test, a, b, c };

app.js

import { test, a, b, c } from './modules/test';

function init() {
  const el = document.getElementById('test');
  const carouselClasses = el.classList;

  carouselClasses.forEach((item) => {
    test(item);
  });

  console.log(`a = ${a}`);
  console.log(`b = ${b}`);
  console.log(`c = ${c}`);
}
init();

Cheers to all who responded!