1
\$\begingroup\$

I am building a website template and I wrote this code to pass a variable from a class list. So, in this example, if you have div with a class of modal as well as a class with a prefix of delay- that will be able to set the delay of the modal, directly from the class.

Example:

<div class="modal delay-10 hidden">

Will have a delay of 10 seconds

Here is the code:

const delayselect = document.querySelector(`.${classname}[class*='delay-']`);
const elements = Array.from(delayselect.classList);
const prefix = "delay-";
const matches = elements.filter(function(value){
    //get rid of all falsely objects
    if(value) {
        return (value.substring(0, prefix.length) === prefix);
    }
});
const match = matches.toString();
const time = match.split('-').pop();
const delay = time * 1000;

And the way it would be applied would be like this:

setTimeout(function(){
    modal.classList.remove('hidden');
}, delay);

This is all just for convenience for the user modifying the template. So they only have to edit the HTML file instead of messing around with the scripts.js file.

I feel like this is a bit clunky though, is there cleaner or simpler way to do this?

\$\endgroup\$
9
  • \$\begingroup\$ The delay only applies to hidden? If you're not writing a library that adds JS behavior into CSS, I'm not sure baking variables into CSS class names is the best approach, so a bit more context about what you're building here might be useful so it's easier to evaluate its appropriateness for your goals. \$\endgroup\$
    – ggorlen
    Jan 22 at 16:34
  • \$\begingroup\$ The goal is to pass a variable from a CSS class to JS for whatever purpose. In this example it is to set the amount of time that needs to pass in seconds before a modal is displayed. This could be used for literally anything. \$\endgroup\$
    – tony
    Jan 22 at 18:24
  • \$\begingroup\$ Thanks, but I understand that you're trying to pass a variable from CSS to JS. I'm asking for more context because using CSS to store JS data is not something you'd normally do, if I'm not mistaken. What aspects of your app/project led you to believe that passing variables from CSS to JS is a good design choice in the first place? What problem is it supposed to solve? Why didn't you put this as an HTML property or in JS, for example? \$\endgroup\$
    – ggorlen
    Jan 22 at 18:26
  • \$\begingroup\$ Gotcha. I am building a website template in which I want to user to be able to easily set the default modal display time in seconds instead of having to open the script.js file and edit the JavaScript code. \$\endgroup\$
    – tony
    Jan 22 at 18:29
  • \$\begingroup\$ Convince is really the only application that I designed this for. \$\endgroup\$
    – tony
    Jan 22 at 18:29

1 Answer 1

1
\$\begingroup\$

This is only borderline reviewable, because the code is lacking context. It would be much cleared if it were wrapped in a function with a clear input and output. For example, it's purely out of context that I'm assuming classname contains the string modal.

Also the connection of the two pieces of code is unclear. Why is the effected element in the second piece of code in a variable called modal when the first part of code uses the variable name delayselect?

Apropos, the variable names are badly selected. delayselect is... weird? delayElement or maybe just element would be better. And elements should be classes.

Then I think you are assuming too much:

  • You are assuming that there is exactly one element with delay-.

  • You are assuming that the filter returns exactly one class name.

  • You are assuming that delay- is always followed by a number parseable by JavaScript.

You have your prefix delay- twice in the code, once as a constant and once in the selector.

The if (value) in the filter function seems unnecessary. I can't imagine that a class list contains a "falsy" value.

Also the filter faction could be shorted using a lambda and .startsWith:

 const matches = elements.filter(value => value.startsWith(prefix));
\$\endgroup\$
1
  • \$\begingroup\$ Hi and thanks for your feedback, as mentioned above the goal is to pass a variable from a CSS class to JS for whatever purpose. This could be used for literally anything, hence why I didn't give much content for the application I was using it for (time that needs to pass in seconds before a modal is displayed). \$\endgroup\$
    – tony
    Jan 22 at 18:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.