The active index data is not being updated in the CSS styling

Question

The active index data is not being updated in the CSS styling

I have a JavaScript file that updates the index based on the cursor's position over items in a menu. Here is the code I used:

const menu = document.getElementById("menu");
Array.from(document.getElementsByClassName("menu-item"))
  .forEach((item, index) => {
    item.onmouseover = () => {
      menu.dataset.activeIndex = index;
    }
  });

The index update is supposed to change the background image using CSS.

#menu[data-active-index="0"] > #menu-background-pattern {
    background-position: 0% -25%;
  }

  #menu[data-active-index="1"] > #menu-background-pattern {
    background-position: 0% -50%;
  }

  #menu[data-active-index="2"] > #menu-background-pattern {
    background-position: 0% -75%;
  }

  #menu[data-active-index="3"] > #menu-background-pattern {
    background-position: 0% -100%;
  }

The background image is not moving even though it should have moved. Here is the HTML:

<div id="menu">
    <div id="menu-items">
      <div class="menu-item">Home</div>
      <div class="menu-item">Shop</div>
      <div class="menu-item">About</div>
      <div class="menu-item">Contact Us</div>
    </div>
    <div id="menu-background-pattern"></div>
    <div id="menu-background-image"></div>
  </div>
  <script></script>
  <link rel="stylesheet" href="main.css">

javascript html css

Answer 1

Answer №1

There are a couple of issues with the JavaScript code that was originally provided by Hyperplexed on Codepen.

The code is executing too early. - Because it's running before the elements have loaded, the onmouseover event cannot be applied to any elements. (Thanks @freedomn-m for pointing this out)
The .forEach() method is designed to iterate over indices, not properties.

Solution:

To address the first problem, we can create a function that executes once the document has finished loading:

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

We then encapsulate the original JS code within a function and run it when the page is fully loaded:

function menuListener () {
    const menu = document.getElementById("menu");
    Array.from(document.getElementsByClassName("menu-item"))
        .forEach((item, index) => {
            item.onmouseover = () => {
                menu.dataset.activeIndex = index;
        }
    });
}
function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
    // Credit: https://youmightnotneedjquery.com/#ready (Suggested by @freedomn-m)
}
ready(menuListener)

Furthermore, we adjust the way we iterate over the elements:

function menuListener () {
    const menuItems = Array.from(document.getElementsByClassName("menu-item"))
    const menu = document.getElementById("menu");
    for (let i = 0; i < menuItems.length; i++) {
        menuItems[i].onmouseover = () => {
            menu.dataset.activeIndex = i
        }
    }
}

By revamping our approach to looping through elements, we've improved both functionality and readability of the code.

Answer 2

There are a couple of issues with the JavaScript code that was originally provided by Hyperplexed on Codepen.

The code is executing too early. - Because it's running before the elements have loaded, the onmouseover event cannot be applied to any elements. (Thanks @freedomn-m for pointing this out)
The .forEach() method is designed to iterate over indices, not properties.

Solution:

To address the first problem, we can create a function that executes once the document has finished loading:

function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
}

We then encapsulate the original JS code within a function and run it when the page is fully loaded:

function menuListener () {
    const menu = document.getElementById("menu");
    Array.from(document.getElementsByClassName("menu-item"))
        .forEach((item, index) => {
            item.onmouseover = () => {
                menu.dataset.activeIndex = index;
        }
    });
}
function ready(fn) {
    if (document.readyState !== 'loading') {
        fn();
    } else {
        document.addEventListener('DOMContentLoaded', fn);
    }
    // Credit: https://youmightnotneedjquery.com/#ready (Suggested by @freedomn-m)
}
ready(menuListener)

Furthermore, we adjust the way we iterate over the elements:

function menuListener () {
    const menuItems = Array.from(document.getElementsByClassName("menu-item"))
    const menu = document.getElementById("menu");
    for (let i = 0; i < menuItems.length; i++) {
        menuItems[i].onmouseover = () => {
            menu.dataset.activeIndex = i
        }
    }
}

By revamping our approach to looping through elements, we've improved both functionality and readability of the code.

Answer 3

Answer №2

Encountering a similar issue, I managed to find a solution. The root cause was attributed to the utilization of class or id in the HTML code. When altering a div with a class name, it's essential to employ '.' whereas if the div is identified by an id, '#' should be used.

Answer 4

Encountering a similar issue, I managed to find a solution. The root cause was attributed to the utilization of class or id in the HTML code. When altering a div with a class name, it's essential to employ '.' whereas if the div is identified by an id, '#' should be used.

The active index data is not being updated in the CSS styling

Answer №1

Answer №2

Similar questions

Using JavaScript functions within a WebView and ViewPager

Set options for nested arrays with up to n levels of children

Ensure that the "position: absolute" is anchored to the document rather than the parent container

Difficulty Parsing Date within XLSX File Using SheetJs

Tips for avoiding tagline text overlapping with other content

steps to create a personalized installation button for PWA

Determine the class name of an element when it is clicked on

Enhancing audio control features using HTML and JavaScript

Modifying the stylesheet of an Infragistics WebDataGrid

What is the best way to design an HTML table that features alternating colors for each row and column?

Ways to achieve a layout with 2 fixed columns and 1 dynamic column using CSS

Can you save data entered by a user into a text file using JavaScript or a similar technology in HTML, without the need to send it to a server?

Toggling the visibility of divs in a dynamic layout

Utilizing JavaScript Files Instead of NPM as a Library for Open Layers: A Step-by-Step Guide

Integrate Vue.js with Laravel

What is the best way to position a button in the center?

Instructions for passing the chosen value to Django

Make changes to the HTML file by directly using Jquery or JavaScript

Mongoose documents are set to automatically be deleted after a duration of one month

Polymer elements fail to adapt to varying screen sizes