<input id="input">
<ul id="ul">
<li>Текст 1</li>
<li>Текст 2</li>
<li>Текст 3</li>
</ul>
Как имея примерно такую структуру заполнять input
текстом из li
по клику?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуHtml:
Не надо назначать элементам айдишники такие же как названия существующих тегов. Иначе Вы очень быстро начнете путаться в трех елках.
<input id="myInput">
<ul id="myList">
<li>Текст 1</li>
<li>Текст 2</li>
<li>Текст 3</li>
</ul>
Javascript:
Не надо вешать обработчики на каждый элемент списка. Вешаем обработчик на сам список, а потом ловим event.target. Это называется делегирование событий, и применяется чтобы не плодить множество одинаковых обработчиков.
var myList = document.getElementById('myList'),
myInput = document.getElementById('myInput');
myList.addEventListener('click', function(event){
myInput.value = event.target.innerHTML;
});
let lis = document.querySelectorAll("li");
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener("click", function() {
replaceToInput(lis[i]);
});
}
function replaceToInput(elem) {
input = document.getElementById("input");
input.setAttribute("value", elem.innerHTML);
}
Протестировал у себя, теперь код работает.