Выбрать следующий элемент после таргета

Question

Есть 2 img в коде

<div class="game" onclick="switchSide(event)">
      <div class="slot">
            <img class="back" src="img/suit.png" />
            <img class="front hidden" src="${card.img}" />
        </div>
    </div>

Первый получаю через event.target, как мне от него же выбрать второй? Пробовал так

const back = event.target;
const front = back.nextSibling;

но выходит какая-то шляпа :(

Answer 1

Учитесь дебажить код, т.к. ваша переменная front возвращает #text "\n " (узел #text, который содержит перенос строки).
А всё потому, что nextSibling() возвращает узел, любой.

Решение - использовать nextElementSibling(), который вернёт следующий элемент.

function switchSide(event) {
  const back = event.target;
  const front = back.nextElementSibling;
  
  back.style.color = 'red';
  front.style.color = 'blue';
}

<div class="game" onclick="switchSide(event)">
  <div class="slot">
    <img class="back" src="img/suit.png" alt="current"/>
    <img class="front hidden" src="${card.img}" alt="next"/>
  </div>
</div>

БЛОГ НА HUSL

Выбрать следующий элемент после таргета

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