Press a button and change the color of box elsewhere on page

Question

I'm very new to coding and have learned my very limited knowledge from forums and tutorials online. I seem to be up against a problem that I cannot for the life of me figure out.

My goal is to press one of three buttons (Leadership, Program, Team) at the top of a grid (the grid lists our services) and have the appropriate grid box change colors. For example, pressing the Leadership button would turn a grid box blue, Program would turn a grid box yellow, and Team would turn a grid box green. This means that a grid box might be linked to more than one of the buttons, as our services overlap. So depending on what button is pressed, a single grid box might change to blue, yellow, or green.

I figured out how to do toggle buttons which show the body onclick. BUT that means A LOT of redundancy. (I would have to do a grid with the appropriately colored boxes for Leadership, another one for Program, and another one for Team). So, I think I'm on the wrong path there.

I've searched toggles, buttons, anchors, event listeners, targets, you name it. It seems like it all relates to the button itself, not how the button relates to an element on the page.

I am very grateful to anyone who can point me in the right direction! Thank you!

    function goToAnchor(anchor) {
      var loc = document.location.toString().split('#')[0];
      document.location = loc + '#' + anchor;
      return false;
    }
    var divs = ["Div1", "Div2", "Div3", "Div4"];
        var visibleDivId = null;
        function divVisibility(divId) {
          if(visibleDivId === divId) {
            visibleDivId = null;
          } else {
            visibleDivId = divId;
          }
          hideNonVisibleDivs();
        }
        function hideNonVisibleDivs() {
          var i, divId, div;
          for(i = 0; i < divs.length; i++) {
            divId = divs[i];
            div = document.getElementById(divId);
            if(visibleDivId === divId) {
              div.style.display = "block";
            } else {
              div.style.display = "none";
            }
          }
        }  

    .square-grey {
     display: table-cell;
     height: 100px; 
     width: 600px;
     text-align: center;
     vertical-align: middle;
     border-radius: 5%;
    /*make it pretty*/
     background: #F5F5F5;
     color: #999999;
     padding: 10px 15px 10px 15px;
     font: 20px "helvetica"; 
     font-weight: 350;
     box-shadow: 2px 3px 3px #999999;
    }
    div.highlit {
      padding: 25px;
    }

<div class="row">
    <div class="buttons">
     <div style="text-align:center">
      <div class="col-sm-4">
    <a href="#anchor" onclick="divVisibility('Div1');">Enterprise</a>
      </div>
       <div class="col-sm-4"> 
    <a href="#anchor" onclick="divVisibility('Div2');">Program</a>
       </div>  
       <div class="col-sm-4">
    <a href="#anchor" onclick="divVisibility('Div3');">Team</a>  
       </div>
      </div>
     </div>
    </div>
    <div class="inner_div">
    <div id="Div1">
    <div class="row">
      <div style="text-align:center">
        <div class="col-sm-3"> 
         <div class="top-buffer">
          <div class="square-grey">
           Strategic Alignment
          </div>
         </div>
        </div>
        <div class="col-sm-3"> 
         <div class="top-buffer">
          <div class="square-grey">
          Adaptive Leadership
         </div>
        </div>
       </div>
        <div class="col-sm-3"> 
        <div class="top-buffer">
         <div class="square-grey">
          Portfolio Management
         </div>
        </div>
       </div>
        <div class="col-sm-3"> 
        <div class="top-buffer">
         <div class="square-grey">
          Cultural Shift
         </div>
        </div>
       </div>
      </div>
     </div>
    </div>
    <div id="Div2" style="display: none;">I'm Div Two</div>
    <div id="Div3" style="display: none;">I'm Div Three</div>
    </div>
</div>

Answer 1

Edited answer, you can add IDs to the boxes and pass them to function.

const changeColor = (elements, color) => {
  elements.forEach(el => {
    const element = document.querySelector(el);
    element.style.backgroundColor = color;
  })
}

.colorbox {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin-bottom: 10px;
}

<div class="colorbox" id="colorbox1"></div>
<div class="colorbox" id="colorbox2"></div>
<div class="colorbox" id="colorbox3"></div>

<button onclick="changeColor(['#colorbox1', '#colorbox3'], 'tomato')">Change 1 & 3 to tomato</button>

<button onclick="changeColor(['#colorbox1', '#colorbox2'], 'aliceblue')">Change 1 & 2 to aliceblue</button>

<button onclick="changeColor(['#colorbox2', '#colorbox3'], '#ff0000')">Change 2 & 3 to reddest</button>