Как привязать к каждой картинке свою кнопку?

Question

У меня есть 6 картинок ("img") и 6 кнопок (".truth"), требуется чтобы при нажатии на (button-1), менялась источник загрузки (src) картинки №1, нажатие кнопки 2 - меняет (src) во второй картинки. Нельзя использовать foreach, только while , нельзя делегирование использовать, так же нельзя использовать массив, можно работать только с НодЛистом. Вешать на каждую кнопку событие, тоже нельзя, до этого решения я допер сразу. Желательно без new и this.

Я понимаю, просьба специфичная, я просто пытаюсь понять как можно это делать и как лучше это делать, смотрю варианты разные, сложно объяснить в двух словах.

const listButnYes = document.querySelectorAll(".truth")


var index = 0;
while (index < listButnYes.length) {
  listButnYes[index].addEventListener("click", butnClick)
  index++;
}

function butnClick() {
  let image = document.getElementsByTagName('img');
  for (let i = 0; i < image.length; i++) {
    image[i].src = "pic/zero.jpg"; // меняет все изображение на одно , я знаю, это заглушка, просто практиковался.
  }

<style>.image {
  display: flex;
  justify-content: center;
  margin: 50px;
}

.blok1 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 50px;
}

.one {
  margin: 0px 10px 0px 10px;
}

.truth,
.but {
  padding: 5px 40px;
}

.heading {
  display: flex;
  justify-content: center;
  margin: 50px;
}

</style>

</head>

<body>
  <div class="heading">
    <h1>Открывай машины , угадывая марку спрятаную на картинке.</h1>
  </div>
  <!--0 -->
  <div class="image">
    <img id="zero" class="center-pic" src="pic/zeroblur.jpg">
  </div>
  <!--0 -->
  <div class="blok1">
    <div class="one">
      <button class="truth" type="button" name="button" value="Ford">Ford</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="Dodg">Dodge</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="GMS">GMS</button>
    </div>
  </div>
  <!--1 -->
  <div class="image">
    <img id="one" class="center-pic" src="pic/oneblur.jpg">
  </div>
  <!--1 -->
  <div class="blok1">
    <div class="one">
      <button class="truth" type="button" name="button" value="Ford">Maserati</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="Dodg">Volkswagen</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="GMS">Renault</button>
    </div>
  </div>
  <!--2 -->
  <div class="image">
    <img id="two" class="center-pic" src="pic/twoblur.jpg">
  </div>
  <!--2 -->
  <div class="blok1">
    <div class="one">
      <button class="but" type="button" name="button" value="Ford">Toyota</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="Dodg">Jeep</button>
    </div>
    <div class="one">
      <button class="truth" type="button" name="button" value="GMS">Hummer</button>
    </div>
  </div>

  <!--3-->
  <div class="image">
    <img id="three" class="center-pic" src="pic/threeblur.jpg">
  </div>
  <!--3 -->
  <div class="blok1">
    <div class="one">
      <button class="but" type="button" name="button" value="Ford">Nissan</button>
    </div>
    <div class="one">
      <button class="truth" type="button" name="button" value="Dodg">Сhevrolet</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="GMS">Lotus</button>
    </div>
  </div>

  <!--4 -->
  <div class="image">
    <img id="four" class="center-pic" src="pic/fourblur.jpg">
  </div>
  <!--4 -->
  <div class="blok1">
    <div class="one">
      <button class="truth" type="button" name="button" value="Ford">Rolls Royce</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="Dodg">Bentley</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="GMS">Jaguar</button>
    </div>
  </div>

  <!--5-->
  <div class="image">
    <img id="five" class="center-pic" src="pic/fiveblur.jpg">
  </div>
  <!--5-->
  <div class="blok1">
    <div class="one">
      <button class="but" type="button" name="button" value="Ford">Mercedes</button>
    </div>
    <div class="one">
      <button class="truth" type="button" name="button" value="Dodg">Aston Martin</button>
    </div>
    <div class="one">
      <button class="but" type="button" name="button" value="GMS">Chrysler</button>
    </div>
  </div>


</body>

</html>

БЛОГ НА HUSL

Как привязать к каждой картинке свою кнопку?

Ответы (0 шт):