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="#" >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?

CodePudding user response：

If the div is already created and hidden you can use code to show the div.

Ex.

JS:

//function to show div

function showDiv() {

var div = document.getElementById("DivtoShow");
//show div
div.style.display = "block";    

}

CodePudding user response：

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