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

#javascript #html #css

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



var select = document.getElementsByClassName("select");

var company = document.getElementById("company");

select.onclick = select_company;

function select_company() {
  company.innerHTML = "";
};
Выберите компанию


  
Компания 1
  
Компания 2
  
Компания 3




    

Ответы

Ответ 1

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



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

Выберите компанию


   
Компания 1
   
Компания 2
   
Компания 3



Ответ 2

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



let [select, company] = [
  [...document.querySelectorAll(".select")], document.querySelector("#company")
];

select.map(elem => elem.addEventListener('click', (e) => {
  company.innerText = e.target.innerText;
}));
Выберите компанию


  
Компания 1
  
Компания 2
  
Компания 3



Ответ 3

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



Выберите компанию


   
Компания 1
   
Компания 2
   
Компания 3