I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

Question

I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

My goal was to create this function using Flask, but it seems that only JavaScript is capable of achieving it. This is my first attempt at coding it. Here's the code snippet:

const navSlide2 = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelectorAll('.test');

    burger.addEventListener('click',()=>{
        nav.classList.toggle('heading-nav-active');
    });
}

I aim to select all elements with the class "test" and apply the "heading-nav-active" function from the CSS file to each selected element. How can I accomplish this task effectively?

javascript html css

Answer 1

Answer №1

Just like @Andy pointed out, it's important to remember that queryselectorAll returns a nodelist which requires iteration to add or toggle the necessary class. Here is an example:

const navSlide = () => {
  const burgerBtn = document.querySelector('.burger');
  const navigationItems = document.querySelectorAll('.test');

  burgerBtn.addEventListener('click', () => {
    navigationItems.forEach(item => item.classList.toggle('active-nav'));
  });
}

Kudos to @ChrisG for highlighting the importance of naming conventions.

Answer 2

Just like @Andy pointed out, it's important to remember that queryselectorAll returns a nodelist which requires iteration to add or toggle the necessary class. Here is an example:

const navSlide = () => {
  const burgerBtn = document.querySelector('.burger');
  const navigationItems = document.querySelectorAll('.test');

  burgerBtn.addEventListener('click', () => {
    navigationItems.forEach(item => item.classList.toggle('active-nav'));
  });
}

Kudos to @ChrisG for highlighting the importance of naming conventions.

I'm looking to create a JavaScript function that will extract each element from a div and then apply a corresponding CSS block to activate it

Answer №1

Similar questions

The alignment of the image is malfunctioning

In the Sandbox, element.firstChild functions properly, but it does not work in the IDE

Sending a POST request to a Flask server using Stripe and AJAX

There seems to be an issue with the functionality of Angular Material in Angular9

Expand the column to occupy the remaining height of the row

Nested array in jQuery

When making a jQuery ajax request to the Google Maps API, an error is returned stating "SyntaxError:

Receiving Output from an AJAX Request

Using JavaScript to execute a JSON parse function will not work

A node module designed to efficiently convert multiple TIFF images into a single multipage TIFF document

Methods for presenting text from an object array using Angular

Obtain and display pictures in HTML

Express middleware for serving static files using express.static() is not properly handling routing and is throwing an error stating that next()

Retention of user-entered data when navigating away from a page in Angular

Syntax error is not caught - why are there invalid regular expression flags being used?

sharing data between two node.js servers using http

The Bootstrap slide function encounters issues within the AJAX success callback

Solving synchronization issues when updating and selecting MySql data in a Node.js environment with concurrent multiple requests

Personalize the landing page for your IPython notebook

The information from the form is not appearing in the req.body