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

Рейтинг: 0Ответов: 1Опубликовано: 08.04.2023

Есть 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;

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

javascript
Источник: Stack Overflow на русском

Ответы

▲ 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">
  <div class="slot">
    <img class="back" src="img/suit.png" alt="current"/>
    <img class="front hidden" src="${card.img}" alt="next"/>
  </div>
</div>