Назначьте изображение на разные кнопки

Question

Как я могу изменить изображение при нажатии каждой отдельной кнопки и сделать показанное изображение по умолчанию?

Из фрагмента кода обратите внимание, как каждая кнопка должна изменять изображение.

Спасибо!

  * {
  box-sizing: border-box;
}

.imagebox {
  width: 50%;
  float: left;
  height: 300px;
  position: relative;
}

.imagebox img {
  position: relative;
  top: 40%;
  transform: translateY(-50%);
  overflow: hidden;
  width: 100%;
}

.textbox-cont {
  width: 50%;
  height: 300px;
  float: right;
  position: relative;
  overflow: hidden;
}

.textbox {
  color: #000000;
  position: absolute;
  text-align: center;
  width: 100%;
  padding: 20px;
  top: 53%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

<div class="imagebox"></div>
<img src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" alt="">
<div class="textbox-cont">
  <div class="textbox">
    Pick a color to see how it will look<br>
    <button style="margin: 8px;">Cobalt Blue</button><br>
    <button style="margin: 8px">Cobaltt Blue</button><br>
    <button style="margin: 8px">Cardinal Red</button><br>
    <button style="margin: 8px">Coral Orange</button><br>
  </div>
</div>

Answer 1

Вы можете добавитьEventListener к каждой кнопке и изменить атрибут изображения src в зависимости от кнопки id:

const img = document.getElementById('img');
for (let button of document.getElementsByTagName('button')) {
  button.addEventListener('click', () => {
    switch (button.id) {
      case 'but1': 
        img.src = "https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687";
        break;
      case 'but2': 
        img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTgfERcK1BcdgSekipirrCw6zpQJ9l40h48Musvp7-dfy8Ym3Yl&usqp=CAU";
        break;
      case 'but3': 
        img.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS9wvzviWw6ag6p_aZgw6kRs267_3jpiI_gGCxvLh7U9QIVAmQa&usqp=CAU";
        break;
      case 'but4': 
        img.src = "https://xzdl43v0mdf2m45tz2aj7kkv35-wpengine.netdna-ssl.com/wp-content/uploads/2010/10/orange-780x400.jpg";
        break;
    }
  });
}

*{
  box-sizing:border-box;
}

.imagebox {
  width: 50%;
  float: left;
  height:300px;
  position:relative;
}

.imagebox img{
  position:relative;
  top:40%;
  transform:translateY(-50%);
  overflow:hidden;
  width: 100%;
  
  
}

.textbox-cont {
  width: 50%;
  height:300px;
  float: right;
  position:relative;
  overflow:hidden;
}

.textbox{
  color: #000000;
  position:absolute;
  text-align: center;
  width:100%;
  padding:20px;
   top:53%;
  transform:translateY(-50%);
  
  
}

@media only screen and (max-width: 700px) {
  .imagebox,
  .textbox-cont {
    width: 100%;
   display: flex;
    flex-direction: column;
  }

<div class="imagebox">
  <img id="img" src="https://s.ftcdn.net/v2013/pics/all/curated/RKyaEDwp8J7JKeZWQPuOVWvkUjGQfpCx_cover_580.jpg?r=1a0fc22192d0c808b8bb2b9bcfbf4a45b1793687" 
  alt="">
</div>
<div class="textbox-cont">
  <div class="textbox">
    Pick a color to see how it will look<br> 
    <button style="margin: 8px" id="but1">Cobalt Blue</button><br>
    <button style="margin: 8px" id="but2">Cobaltt Blue</button><br>
    <button style="margin: 8px" id="but3">Cardinal Red</button><br>
    <button style="margin: 8px" id="but4">Coral Orange</button><br>
  </div>
</div>