Как добавить класс выбранному элементу списка ul на чистом js

Question

Есть список элементов (ссылок) ul li, и отдельно от списка блок. Нужно, чтоб контент, который я кликну из списка отображался в блоке

Пример Есть список городов:

<ul>
    <li>Москва</li>
    <li>Санкт-Петербург</li>
    <li>Новосибирск</li>
    <li>Архангельск</li>
    <li>Нижний новгород</li>
</ul>

И отдельный блок:

<div class="city_result">Укажите ваш регион</div>

Нужно чтоб в блоке отображался выбранный мною город

Answer 1

let resultDiv = document.querySelector('.city_result');
document.querySelectorAll('ul li').forEach(function(element) {
    element.addEventListener('click', function() {
       resultDiv.textContent = element.textContent;
    });
});

<ul>
    <li>Москва</li>
    <li>Санкт-Петербург</li>
    <li>Новосибирск</li>
    <li>Архангельск</li>
    <li>Нижний новгород</li>
</ul>


<div class="city_result">Укажите ваш регион</div>

Answer 2

Можно вот так это сделать:

const city = document.getElementById('city');
const result = document.getElementById('city_result');

city.addEventListener('click', e => {
  if (e.target != city)
    result.value = e.target.textContent;
});

.city{
  list-style: none;
  padding: 5px;
  background-color: #E7EAEB;
  width: 150px;
}

li{
  margin-bottom: 5px;
}

li:hover {
  cursor: pointer;
}

.city_result {
  display: inline-block;
  border: 1px solid grey;
  padding: 5px;
}

<ul id="city" class="city">
  <li>Москва</li>
  <li>Санкт-Петербург</li>
  <li>Новосибирск</li>
  <li>Архангельск</li>
  <li>Нижний новгород</li>
</ul>



<input type="text" id="city_result" class="city_result" placeholder="Укажите ваш регион" value="">

БЛОГ НА HUSL

Как добавить класс выбранному элементу списка ul на чистом js

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