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);
Hello, I was making a javascript script that would create a table of poems and let the users read the poem when the "read" button is clicked. I coded the first part so the script creates the table. But I couldn't do the part where the user would click the button, created a div and displayed the text. Could I get an helping hand?
If the div is already created and hidden you can use code to show the div.
Example JavaScript:
//function to show div
function showDiv() {
var div = document.getElementById("DivtoShow");
//show div
div.style.display = "block";
}
I'm going to assume you've got the button the user is to click to create the div and display the text. So all you'd need to do then is add a listener to it that calls a function that builds a div, assigns it the text of the poem, and appends it to an existing div (wherever you want it on your page). These MDN pages should help (in order):
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
Alternately, you could create the div with the text in it in the html file, and assign it the hidden tag, then assign a listener to the button that calls a function which uses .toggleAttribute to remove/add that tag from the element on button-click.
https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute