Soy nuevo en JavaScript. Estaba tratando de escribir un código que convertiría un archivo de encabezado en una lista editable y una vez que haga clic fuera, las entradas se guardarán como el texto interno de los elementos de la lista, mientras que los valores de entrada se almacenarán en el almacenamiento local de la web. sitio. Hasta ahora, he escrito el código a continuación y probé el evento "borroso", pero funciona solo para un elemento de entrada de lista.
console.log("This is exercise 2"); let element = document.createElement("div"); element.setAttribute("id", "mydiv"); element.innerHTML = ` <ul style="border: 2px solid black; margin: 5px"> <li class="listItem">I am Item 1</li> <li class="listItem">I am Item 2</li> <li class="listItem">I am Item 3</li> <li class="listItem">I am Item 4</li> </ul> `; document.querySelector("h2").appendChild(element); let parent = document.getElementById("mydiv"); parent.addEventListener("click", myfunc); function myfunc(e) { var child = document.getElementsByClassName("listItem"); if (document.getElementsByClassName("inputItems").length==0){ Array.from(child).forEach(function(element){ element.innerHTML = ` <input type="text" class="inputItems" placeholder="Edit Me" style="border: 2px solid black"> `; }); } } parent.addEventListener("blur", function(){ let listitems = Array.from(document.getElementsByClassName("listItem")); let items = Array.from(document.getElementsByClassName("inputItems")); for(let i=0; i<listitems.length; i++){ listitems[i].innerHTML = items[i].value; localStorage.setItem(`text ${i+1}`, items[i].value); } }, true);Puede colocar el detector de eventos en todo el documento y usar event.target para verificar si el clic está fuera de su elemento principal. event.target es el elemento que desencadenó un evento.
Esto es lo que junté:
console.log("This is exercise 2"); let element = document.createElement("div"); element.setAttribute("id", "mydiv"); element.innerHTML = ` <ul style="border: 2px solid black; margin: 5px"> <li class="listItem">I am Item 1</li> <li class="listItem">I am Item 2</li> <li class="listItem">I am Item 3</li> <li class="listItem">I am Item 4</li> </ul> `; document.querySelector("h2").appendChild(element); let parent = document.getElementById("mydiv"); document.addEventListener("click", myfunc); function myfunc() { if(!parent.contains(event.target)) { toList(); return; } if(document.getElementsByClassName("inputItems").length != 0) return; var child = document.getElementsByClassName("listItem"); Array.from(child).forEach(function (element) { if(element == event.target) toInput(); } ); } function toInput() { var child = document.getElementsByClassName("listItem"); Array.from(child).forEach(function(element){ element.innerHTML = ` <input type="text" class="inputItems" placeholder="Edit Me" style="border: 2px solid black"> `; }); } function toList() { var child = document.getElementsByClassName("listItem"); Array.from(child).forEach(function(element) { element.innerHTML = element.getElementsByClassName("inputItems")[0].value; }); } <h2></h2>