在 javascript 中单击按钮时显示文本

Question

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);

你好，我正在制作一个 javascript 脚本，它会创建一个诗歌表，并让用户在单击“阅读”按钮时阅读这首诗。 我对第一部分进行了编码，以便脚本创建表格。 但是我无法完成用户单击按钮、创建 div 并显示文本的部分。 我能得到帮助吗？

Answer 1

如果 div 已经创建并隐藏，您可以使用代码来显示 div。

示例 JavaScript：

//function to show div
function showDiv() {
    var div = document.getElementById("DivtoShow");
    //show div
    div.style.display = "block";    
}

Answer 2

我假设您已经获得了用户单击以创建 div 并显示文本的按钮。 因此，您需要做的就是向它添加一个侦听器，该侦听器调用 function 构建一个 div，将诗歌的文本分配给它，并将其附加到现有的 div（页面上您想要的任何位置）。 这些 MDN 页面应该有助于（按顺序）：

https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createElement

https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/innerText

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/appendChild

或者，您可以在 html 文件中创建包含文本的 div，并为其分配hidden标签，然后将监听器分配给调用 function 的按钮，该按钮使用.toggleAttribute从按钮上的元素中删除/添加该标签-点击。

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/toggleAttribute