Как подставить по клику значения data-атрибута из блока, другому блоку?

Question

[Михаил Иванов]

Есть div например и выпадающий список городов

<div id="city"><img src="img/flag-m.png" /> Москва</div>
<ul>
<li data-city="Красноярск"  data-gerb="/img/flag.png">Красноярск</li>
<li data-city="Казань" data-gerb="/img/flag.png">Казань</li>
<li data-city="Сочи"  data-gerb="/img/flag.png">Сочи</li>
</ul>

Как из выпадающего списка при клики на город , подставить значения data-city и data-gerb нажатого города
в

<div id="city"><img src="img/flag-m.png" /> Москва</div>

Answer 1

[0xD34F]

Оберните имя города в span, чтобы было так:

<div id="city">
  <img src="img/flag-m.png" />
  <span>Москва</span>
</div>

Сама подстановка значений:

document.querySelector('ul').addEventListener('click', e => {
  const li = e.target.closest('li');
  if (li) {
    document.querySelector('#city img').src = li.dataset.gerb;
    document.querySelector('#city span').textContent = li.dataset.city;
  }
});

// или

document.querySelectorAll('li').forEach(n => {
  n.addEventListener('click', onClick);
});

function onClick({ target: { dataset: { city, gerb } } }) {
  document.querySelector('#city img').src = gerb;
  document.querySelector('#city span').textContent = city;
}

Comments

[Михаил Иванов]

Супер оказалось все очень просто) Спасибо вам большое)