Question 175713 in CSS Question posted in
Some basic documentation can be found here.

How can I select & add color to a menu item on click with JavaScript?

I try to make a menu that adds the green color to the selected one and in turn deselects the others by adding the white color, that works from top to bottom and vice versa, I already tried to program it but it doesn’t seem to work well, could you tell me where my error is.

when clicking on any of the menu fields, I want it to select the menu field that I clicked on and paint it green and deselect the others by painting them white.

This functionality must work from top to bottom (from the Home field to the about field of the menu) and from bottom to top (from the about field to the Home of the menu ), that is, in any direction that is clicked.

my source code is:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>

        </style>
    </head>
    <body>

    <div class="container">
        <p class="menu">Home</p>
        <p class="menu">Gallery</p>
        <p class="menu">Technology</p>
        <p class="menu">Information</p>
        <p class="menu">Contact</p>
        <p class="menu">About</p>
    </div>

    <script>
        let menu = document.querySelectorAll('.menu');

        menu.forEach((btn, i) => {
            btn.addEventListener("click", (ev) =>{
                //console.log(ev.target); 

                // clicking from top to bottom or from home to about

                for(let bt = 0; bt < i; bt++){
                    menu[bt].style.background = '#FFFFFF';
                }

                //missing make the condition, when home is clicked, the selection or the green color should be removed, from the about menu.

                //----------------------------------------------

                // clicking from bottom to top or from about to home
                // it seems, it doesn't work, where is my mistake?


                for(let at = menu.length; at > i; at--){
                    menu[i].style.background = '#FFFFFF';
                }

                menu[i].style.background = '#BEFFC7';
            });
        });

    </script>
    </body>
</html> ```
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This solution is using two for but I think it would be the same using forEach.

        // bucle a través de cada campo del menu.
    // loop through each menu field.
    for (let i = 0; i < menu.length; i++) {
        // adjunte un evento de clic a cada campo del menu
        // attach a click event to each menu field
        menu[i].addEventListener('click', function() {
            for (let j = 0; j < menu.length; j++) {
                //eliminar la selecion activa de todos las campos del menu
                // remove the active selection from all menu fields
                menu[j].style.background = '#FFFFFF';
            }
            
            //agregar la seleccion activa a el campo del menu en la que se hizo clic
            // add the active selection to the clicked menu field
            menu[i].style.background = '#BEFFC7';
        });
    }

  2. 0

    here is the solution using a forEach

        menu.forEach((btn, i) => {
        btn.addEventListener("click", (ev) =>{
            console.log(ev.target);
            for (let j = 0; j < menu.length; j++) {
                menu[j].style.background = '#FFFFFF';
            }
            menu[i].style.background = '#BEFFC7';
        });
    });
    Login or Signup to reply.
  3. 0

    There is no need to repaint all menu items each time a single item gets ‘clicked’:

    • In CSS make all menu items white by default.
    • In JS only toggle the color of the menu item clicked green (or white when it was already green).
    • Optionally turn .menu item green on hover.

    snippet

    let container = document.querySelector('.container');
let current = null; // To hold reference to last 'clicked' menu item

container.addEventListener("click", (ev) =>{
    // When a .menu inside .container gets clicked
    if (ev.target.matches('.menu')) {
        // If 'current' exists/defined, make it white
        if (current) current.style.backgroundColor = '#fff';

        // Leave white if 'clicked' is current, otherwise toggle to green
        if (ev.target != current) ev.target.style.backgroundColor = '#beffc7';

        // Save reference to clicked element for next 'click'
        current = ev.target;
    };
});
    body         { background-color: #efefef }
.menu        { background-color: white; cursor: pointer }
.menu:hover  { background-color: #beffc7 } /* [OPTIONAL] */
    <div class="container">
    <p class="menu">Home</p>
    <p class="menu">Gallery</p>
    <p class="menu">Technology</p>
    <p class="menu">Information</p>
    <p class="menu">Contact</p>
    <p class="menu">About</p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search