class Poem{ constructor(title, author, text){ this.title = title; this.author = author; this.text = text; } } class UI{ static displayPoems(){ const StoredPoems = [ { title: "placeholder title", author: "placeholder author", text: "placeholder text" }, { title: "placeholder title", author: "placeholder author", text: "placeholder text" } ]; const poems = StoredPoems; poems.forEach((poem) => UI.addPoemToTheList(poem)); } static addPoemToTheList(poem){ const list = document.getElementById('poem-list'); console.log(list); const row = document.createElement('tr'); row.innerHTML = ` <td>${poem.title}</td> <td>${poem.author}</td> <td><a href="#" class="read">Read</a></td> `; } } document.addEventListener('DOMContentLoaded', UI.displayPoems);Hola, estaba creando un script javascript que crearía una tabla de poemas y permitiría a los usuarios leer el poema cuando se hace clic en el botón "leer". Codifiqué la primera parte para que el script cree la tabla. Pero no pude hacer la parte en la que el usuario haría clic en el botón, crearía un div y mostraría el texto. ¿Podría obtener una mano amiga?
Si el div ya está creado y oculto, puede usar código para mostrar el div.
JavaScript de ejemplo:
//function to show div function showDiv() { var div = document.getElementById("DivtoShow"); //show div div.style.display = "block"; }Asumiré que tiene el botón en el que el usuario debe hacer clic para crear el div y mostrar el texto. Entonces, todo lo que necesita hacer es agregarle un oyente que llame a una función que cree un div, le asigne el texto del poema y lo agregue a un div existente (donde lo desee en su página). Estas páginas de MDN deberían ayudar (en orden):
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild
Alternativamente, puede crear el div con el texto en el archivo html y asignarle la etiqueta hidden , luego asignar un oyente al botón que llama a una función que usa .toggleAttribute para eliminar/agregar esa etiqueta del elemento en el botón -hacer clic.
https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute