Необходимо чтобы при нажатии на кнопку менялся цвет квадрата

// Сохраняем ссылку на квадрат в переменную для дальнейших манипуляций
const square = document.querySelector('.squere');

// Функция, принимающая на вход цвет. В случае, если 
// параметр не передан, то значение по умолчанию - white
const setColor = (color = 'white') => {
  // устанавливаем цвет фона у квадрата
  square.style.backgroundColor = color;
}

.squere{
  position: absolute;
  margin-left:55%;
  margin-top:2%;
  background-color: white;
  padding: 5%; 
  box-shadow: 0 14px 28px rgba(0,0,0,0.85), 0 10px 10px rgba(0,0,0,0.32);
  background-color: white;
}

.btn1{
  margin-left: 8%;
  position: relative;
  margin-left: 8%;
  box-shadow:0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: .3s;
}
.red{
  float: right;
  padding-left: 15px;
  color:red;
}

.btn2{
  margin-left: 8%;
  position: relative;
  margin-left: 8%;
  box-shadow:0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: .3s;
}
.yellow{
  float: right;
  padding-left: 15px;
  color: yellow;
}

.btn3{
  position: relative;
  margin-left: 8%;
  box-shadow:0 5px 0 #3C93D5;
  display: inline-block;
  border-radius: 5px;
  padding: 10px 25px;
  font-size: 22px;
  text-decoration: none;
  background: #55acee;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  transition: .3s;
}
.green{
   float: right;
  padding-left: 15px;
  color: green;
}

.cnopocki{
  position: absolute;
  margin-left:15%;
  margin-top:0.8%;
  background-color: #006363;
  width:430px;
  height:220px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.85), 0 10px 10px rgba(0,0,0,0.32);
}
body{
  color:#ee9e9;
}

<span>
        <span class="squere">Цвет</span>
    </span>
    <div class="cnopocki">
        <p>
      <button class="btn1" onclick="setColor('red')"> Поменяй квадрат на <div class="red">красный</div> </button>
        </p>
        <p>
      <button class="btn2" onclick="setColor('yellow')"> Поменяй квадрат на <div class="yellow"> желтый </div> </button>
    </p>
        <p>
       <button class="btn3" onclick="setColor('green')"> Поменяй квадрат на <div class="green"> зеленый </div> </button>
    </p>
    </div>

let btns = document.querySelectorAll(".btn");
// Собирает нумерованный список всех кнопок с class="btn"
// btns[0] — первая кнопка, btns[1] — вторая кнопка, btns[i] — i-тая кнопка.

let last_clicked = null;
// Пусть ссылка на последнюю кликнутую кнопку хранится в переменной.

for (let i = 0; i < btns.length; i++) {
  // Перебирает кнопки и на всех добавляет обработчик события,
  // Функция set_square_color будет запускаться при клике.
  btns[i].addEventListener("click", set_square_color);
}

function set_square_color() {
  let curr_clicked = this;
  // Обработчик клика привязывет ключевое слово `this` к текущей кликнутой кнопке.
  
  let box = document.querySelector(".square");
  // querySelectorAll дает список элементов,
  // querySelector — Первый подходящий элемент на странице.
  
  box.style.backgroundColor = curr_clicked.dataset.color;
  // в JS тире из стилей (background-color) заменяется большой буквой.
  // data-color → dataset.color, data-bubu → dataset.bubu
  // Можно назначить элементам кастомные атрибуты, и так получить к ним доступ.
  
  /*** Последующий кусок можно выкинуть */
  if (last_clicked) { // Есть предыдущая кликнутая кнопка?
    let txt = last_clicked.firstChild.textContent;
    // firstChild — текстовый узел `Поменяй квадрат на`
    
    last_clicked.firstChild.textContent = txt.replace("Поменял", "Поменяй");
  }
  
  let txt = curr_clicked.firstChild.textContent;
  curr_clicked.firstChild.textContent = txt.replace("Поменяй", "Поменял");
  
  last_clicked = curr_clicked;
  // Ссылка на текущую кликнутую кнопку сохраняется во внешнюю переменную.
}

.wrap {
  width: 430px;
  height: 220px;
  
  margin: 10px;
  padding: 10px;
  
  background-color: #066;
  box-shadow: 0 14px 28px #000d, 0 10px 10px #0002;
}

.square {
  width: 40px;
  height: 40px;
  
  margin: 10px;
  padding: 5px;
  
  background-color: white;
  box-shadow: 0 14px 28px #000d, 0 10px 10px #0002;
}

.btn {
  position: relative;
  display: inline-block;
  
  width: 90%;  
  margin: 5px;  
  padding: 10px 25px;
  
  border-radius: 5px;
  
  font-size: 22px;
  background-color: #5be;
  box-shadow: 0 14px 28px #0004, 0 10px 10px #0004;
  
  cursor: pointer;
}

.red {
  color: red;
}

.yellow {
  color: yellow;
}

.green {
  color: green;
}

<div class="square">Цвет</div>

<div class="wrap">
  <button class="btn" data-color="#f00">
    Поменяй квадрат на <span class="red">красный</span>
  </button>
  
  <button class="btn" data-color="#ff0">
    Поменяй квадрат на <span class="yellow"> желтый</span>
  </button>
  
  <button class="btn" data-color="#090">
    Поменяй квадрат на <span class="green"> зеленый</span>
  </button>
</div>