Question 224819 in Html Question posted in
Some basic documentation can be found here.

Html – Change the background color with a javascript code

I want to write a JavaScript code that will change the background color of all the buttons I click on (class is nav-bckStyle) when I click on button, and return to the original background color (class is nav-bck) when I click on them again. However, when I create a function with forEach(), when I click on img, it only changes the background color of img, but not the color of the buttons. Similarly, when I click on text, it only changes the background color of text. How should I code this?

HTML

<div id="nav">
        <nav>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupA">
                    <img src="/3th/img/rice-kimchi.png" alt="rice and kimchi">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupB">
                    <img src="/3th/img/fruit-vegetable.png" alt="fruit and vegetable">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupC">
                    <img src="/3th/img/meat-seafood.png" alt="meat and seafood">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupD">
                    <img src="/3th/img/frozenFood-snack.png" alt="frozen-food and snack">
                    <h4>lorem</h4>
                </button>
            </div>
            <div class="navGroup nav-bck">
                <button class="category-button" data-group="groupE">
                    <img src="/3th/img/etc.png" alt="etc">
                    <h4>lorem</h4>
                </button>
            </div>
        </nav>
</div>

CSS

#nav nav {
  display: flex;
  flex-flow: row wrap;
  color: #fff;
  padding: 0 10px;
}
.nav-bck{
  background: rgb(1, 167, 1);
}
.nav-bckStyle{
  background: rgb(1, 107, 1);
}
#nav nav .navGroup {
  flex-grow: 1;
}
#nav nav .navGroup img {
  padding: 5px;
  height: 60px;
}
#nav nav .navGroup h4 {
  display: inline;
  vertical-align: middle;
  margin: 0 10px;
}
#nav nav button {
  background: transparent; 
  padding: 5px 10px;
  border: none;
}

JS

categoryButtons.forEach(button => {
        button.addEventListener('click', () => {
            const navGroup = this.documentElement.querySelectorAll('.navGroup');
            console.log(navGroup);
    
            function navStyle(event){
                // navGroup의 class인 nav-bck 제거
                navGroup.forEach((e) => {
                    e.classList.remove('nav-bck');
                });
    
                // click한 navGroup에 nav-bckStyle class 추가
                event.target.classList.add('nav-bckStyle');
            }
    
            // 클릭 시 실행
            navGroup.forEach((e) => {
                e.addEventListener('click', navStyle);
            });
        })
    })
Tags:

2

Answers


  1. 0

    You’re removing the nav-bck class from elements matched by .navGroup but you’re adding it to elements you click on (such as images or level 4 headings).

    You should add the class to elements matched by .navGroup instead. Search up the DOM from the target using the closest method.

    Login or Signup to reply.
  2. 0

    You’re adding the click event to the button elements, and then within that event, you’re adding another click event to the ‘.navGroup’ div elements.dd the click event listener directly to the div elements with class ‘navGroup’

    const navGroups = document.querySelectorAll('.navGroup');

navGroups.forEach((group) => {
    group.addEventListener('click', () => {
       
        if (group.classList.contains('nav-bck')) {
            group.classList.remove('nav-bck');
            group.classList.add('nav-bckStyle');
        }
        
        else if (group.classList.contains('nav-bckStyle')) {
            group.classList.remove('nav-bckStyle');
            group.classList.add('nav-bck');
        }
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search