<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><div id="city"><img src="img/flag-m.png" /> Москва</div>
<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;
}