Estoy tratando de resolver una pregunta de testdome.
Implemente la función showCustomers para que represente a los clientes como elementos de lista. El primer argumento de la función, clientes, es una matriz de objetos con las propiedades de nombre y correo electrónico. El segundo argumento de la función, targetList, es una lista HTML desordenada a la que se debe agregar cada cliente como un elemento de lista independiente.
Las propiedades de nombre y correo electrónico deben agregarse como dos párrafos dentro del elemento de la lista. Al principio, el elemento de párrafo de correo electrónico no debe estar presente en el DOM. El elemento de párrafo de correo electrónico debe agregarse al DOM después de hacer clic en el nombre, y debe eliminarse del DOM cuando se vuelve a hacer clic en el nombre.
Por ejemplo, el siguiente código:
document.body.innerHTML = ` <div> <ul id="customers"> </ul> </div> `; let customers = [{name: "John", email: "john@example.com"}, {name: "Mary", email: "mary@example.com"}]; showCustomers(customers, document.getElementById("customers")); let customerParagraph = document.querySelectorAll("li > p")[0]; if(customerParagraph) { customerParagraph.click(); } console.log(document.body.innerHTML);Debería representar:
<div> <ul id="customers"> <li> <p>John</p> <p>john@example.com</p> </li> <li> <p>Mary</p> </li> </ul> </div>Hice la primera parte. Este es mi código:
function showCustomers(customers, targetList) { // Your code goes here customers.forEach(item => { let elem = ` <li> <p>${item.name}</p> <p>${item.email}</p> </li> `; targetList.innerHTML += elem; }) } document.body.innerHTML = ` <div> <ul id="customers"> </ul> </div> `; let customers = [{name: "John", email: "john@example.com"}, {name: "Mary", email: "mary@example.com"}]; showCustomers(customers, document.getElementById("customers")); let customerParagraph = document.querySelectorAll("li > p")[0]; if(customerParagraph) { customerParagraph.click(); } console.log(document.body.innerHTML);Este código pasa 2 de 4 pruebas. No pude encontrar una manera de hacer que el correo electrónico alternara.
function showCustomers(customers, targetList) { // Your code goes here customers.forEach((item) => { const li = document.createElement("li"); const name = document.createElement("p"); name.textContent = item.name; name.style.cursor = "pointer"; name.addEventListener("click", (event) => { const parent = event.target.parentElement; if (parent.children.length == 1) { const email = document.createElement("p"); email.textContent = item.email; parent.appendChild(email); } else { parent.lastChild.remove(); } }); li.appendChild(name); targetList.appendChild(li); }); } document.body.innerHTML = ` <div> <ul id="customers"> </ul> </div> `; let customers = [ { name: "John", email: "john@example.com" }, { name: "Mary", email: "mary@example.com" } ]; showCustomers(customers, document.getElementById("customers")); let customerParagraph = document.querySelectorAll("li > p")[0]; if (customerParagraph) { customerParagraph.click(); } console.log(document.body.innerHTML);