Всем привет. Учу js. Не знаю как правильно сформулировать вопрос кратко. В общем ситуация такая, есть список
ul
, в нем произвольное количество
li
. По клику на
li
, должен открыться инпут в этом же элементе. На инпуте висит событие о потере фокуса. Соответственно если кликать на все
li
, то в каждом открывается инпут. Как сделать так, чтобы инпут мог быть открытым только один? То если если сработало событие и на каком то пункте
li
открылся инпут, на других он не должен открываться. Прошу прощения на столь неясное изложение проблемы, я только учусь и умных слов знаю еще мало)) Помогите пожалуйста.
<ul>
<li>1</li>
<li>12</li>
<li>356</li>
<li>dfhg</li>
<li>fghsfg</li>
</ul>
let list = document.querySelectorAll('li');
for (let li of list) {
li.addEventListener('click', function editLi(){
let input = document.createElement('input');
input.value = li.innerHTML;
li.innerHTML = '';
li.appendChild(input);
li.removeEventListener('click', editLi);
input.addEventListener('blur', function(){
li.innerHTML = input.value;
li.addEventListener('click', editLi);
});
});
}