I am not able to select a specific class using Document.querySelector()

JavaScript
1

I was trying to create a To Do List App and I am one step away from completion.

I set the class of a div using a conditional inside of a string literal and the condition was a Boolean state of the app.

I can select the normal class but not the class that that is set when the condition is met. I can style it using CSS but not select it using Jquery. Really bugging me being one step away from completion of the app.

Here is my Jquery

<script type="text/javascript" src="vanilla-tilt.js"></script>
  <script>
    VanillaTilt.init(
      document.querySelectorAll(".task, .container2"),
      {
        max: 25,
        speed: 400,
        glare: true,
        "max-glare": 1,
      }
    );
  </script>

And here is my component

import Task from "./Task";

const Tasks = ({ tasks, onDelete, onToggle, showAddTask }) => {
  return (
    <div
      className={`container ${showAddTask && "containerGlass container2"}`}
    >
      {tasks.map((task) => (
        <Task
          key={task.id}
          task={task}
          onDelete={onDelete}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
};

export default Tasks;

Here is my GitHub repository for reference:

2

container ${showAddTask && 'containerGlass container2'};

change it to:

container ${showAddTask ? 'containerGlass container2': " "};

1 Like
3

Nope Doesn’t work. Had tried it before and tried again too. I can style those classes : container2 with CSS but I cannot select it using Document.querySelector(). I guess because it doesn’t exist in the document which I guess the query selector searches for when it doesn’t find then nothing happens. Don’t know how to solve it.

4

The above change doesn’t do anything different to what you already have, so yep it’s not going to make any difference. Why on earth are you trying to do this from outside the app?

(Edit: for clarity, React provides (and has always provided) imperative access via refs)

1 Like
5

That’s the correct statement to add classes containerGlass and container2 when showAddTask evaluate to true;

className={container qq ${ showAddTask ? ' containerGlass container2' : ''}}

Added classes wont be selected because the script was launched before they was added, you need to refresh the script every time the showAddTask evaluate to true. THE SCRIPT IS LAUNCHED ONLY ONCE, since page doesnt refresh.

Just add the effect by UseEffect hook which will depend of the state of showAddTask.,

1 Like
6

So just to clarify what you should be doing here:

  • install the library as a dependency
  • in the component where you use it, get a ref to the element you’re going to attach it to.
  • you seem to want to turn the effect on and off, so you will need to use state as well
  • in a useEffect, attach the VanillaTilt code to the element, which is going to be referenced (natch) by that ref
  • in the return value of the useEffect, run the destroy method of VanillaTilt

Trying to use DOM query API on a React app from outside the app is a bit crackers: one of the primary reasons for using React in the first place is not to need that. And you’re going to get into race condition situations.

Also note the library you’re using seems to do pretty bad stuff to mobile browsers (it has no visible effects as you can’t hover on mobile, but it still thinks it’s running at full-pelt, the example seem likely to cause big memory leaks afaik)

1 Like
7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.