我想写一个JavaScript代码，当我点击按钮时，它会改变我点击的所有按钮的背景颜色（类是nav-bckStyle），当我再次点击它们时，它会返回到原始的背景颜色（类是nav-bck）。但是，当我用forEach（）创建一个函数时，当我点击img时，它只改变img的背景颜色，而不改变按钮的颜色。同样，当我点击文本时，它只会改变文本的背景颜色。我应该如何编码呢？
超文本标记语言

<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);
            });
        })
    })

型