Как сделать чтобы при выборе элемента списка менялся текст абзаца?

152

15 апреля 2019, 20:40

Нужно чтобы при выборе определенного li, менялось содержимое p на значение li

var select = document.getElementsByClassName("select"); 
 
var company = document.getElementById("company"); 
 
select.onclick = select_company; 
 
function select_company() { 
  company.innerHTML = ""; 
};

<p id="company">Выберите компанию</p> 
 
<ul> 
  <li class="select">Компания 1</li> 
  <li class="select">Компания 2</li> 
  <li class="select">Компания 3</li> 
</ul>

Answer 1

Проблема в том, что у Вас в var select - целая коллекция, поэтому просто так что-то сделать по клику не получится - нужен обход всех элементов этой коллекции:

$('.select').each(function(){ 
  $(this).click(function(){ 
    $('#company').text($(this).text()); 
  }) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<p id="company">Выберите компанию</p> 
 
<ul> 
   <li class="select">Компания 1</li> 
   <li class="select">Компания 2</li> 
   <li class="select">Компания 3</li> 
</ul>

Answer 2

Вариант на чистом `javascript`:

let [select, company] = [ 
  [...document.querySelectorAll(".select")], document.querySelector("#company") 
]; 
 
select.map(elem => elem.addEventListener('click', (e) => { 
  company.innerText = e.target.innerText; 
}));

<p id="company">Выберите компанию</p> 
 
<ul> 
  <li class="select">Компания 1</li> 
  <li class="select">Компания 2</li> 
  <li class="select">Компания 3</li> 
</ul>

Answer 3

Нельзя один id назначать сразу нескольким элементам на страницу, вместо него для элементов лучше используйте class. Вариантов реализации достаточно, например:

<p id="company">Выберите компанию</p> 
 
<ul> 
   <li class="select">Компания 1</li> 
   <li class="select">Компания 2</li> 
   <li class="select">Компания 3</li> 
</ul> 
<script> 
var select = document.querySelectorAll('li.select'); 
 
var company = document.getElementById("company"); 
 
select[0].onclick = function() { 
	company.innerHTML = 'Выбрана компания 1'; 
} 
 
select[1].onclick = function() { 
	company.innerHTML = 'Выбрана компания 2'; 
} 
 
select[2].onclick = function() { 
	company.innerHTML = 'Выбрана компания 3'; 
} 
</script>