如何使用javascript在单击按钮时显示ul中多个div的p标签的内容

Question

我陷入困境，需要你的帮助！我是 js 新手，所以我一直坚持下去。基本上，我正在制作一个测验页面。打开时应该只显示一个开始按钮。单击该按钮时，应显示包含课堂问题的 div 中的内容。同时单击按钮时，我想访问所有 p 标签的内容并将其显示在 ul 中，以类名作为列表。请帮我。这是代码<ul id="list"></ul><button id="startbtn" onclick="myfunction()">Start </button><div class="questions" style="display:none"><div class="Question">    <p>The p tag 1</p></div><div class="Question">    <p>The p tag 2</p></div><div class="Question">    <p>The p tag 3</p></div><div class="Question">    <p>The p tag 4</p></div><div class="Question">    <p>The p tag 5</p></div><div class="Question">    <p>The p tag 6</p></div></div><script>    function myfunction()    {        var x = "";        x=document.getElementsByClassName("questions");          if (x.style.display === "none") {            x.style.display = "block";          }    }</script>

Answer 1

我想访问所有 p 标签的内容并将其显示在 ul 中，并将类名作为列表。

主意

• 获取所有问题

• 循环它们并创建li标签 - 为此，您必须将p's设置innerText为li'sinnerText

• 然后你就可以使用ul.appendChild它来添加它。

function myfunction() {

  var x = "";

  x = document.getElementsByClassName("questions")[0];

  if (x.style.display === "none") {

    x.style.display = "block";

  }

  const ul = document.querySelector('ul#list');

  document.querySelectorAll('.Question p').forEach((element) => {

    const li = document.createElement('li');

    li.innerText = element.innerText;

    ul.appendChild(li)

  })

}

<ul id="list">

</ul>

<button id="startbtn" onclick="myfunction()">Start </button>

<div class="questions" style="display:none">

  <div class="Question">

    <p>The p tag 1</p>

  </div>

  <div class="Question">

    <p>The p tag 2</p>

  </div>

  <div class="Question">

    <p>The p tag 3</p>

  </div>

  <div class="Question">

    <p>The p tag 4</p>

  </div>

  <div class="Question">

    <p>The p tag 5</p>

  </div>

  <div class="Question">

    <p>The p tag 6</p>

  </div>

</div>

Answer 2

document.getElementsByClassName返回一个数组。试试这个 - 它将获得该类的第一个元素.questions

x = document.getElementsByClassName("questions")[0];

Document 接口的方法getElementsByClassName返回具有所有给定类名的所有子元素的类似数组的对象。

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

function myfunction() {

  var x = "";

  x = document.getElementsByClassName("questions")[0];

  if (x.style.display === "none") {

    x.style.display = "block";

  }

  const ul = document.querySelector('ul#list');

  document.querySelectorAll('.Question p').forEach((element) => {

    const li = document.createElement('li');

    li.innerText = element.innerText;

    ul.appendChild(li)

  })

}

<ul id="list">

</ul>

<button id="startbtn" onclick="myfunction()">Start </button>

<div class="questions" style="display:none">

  <div class="Question">

    <p>The p tag 1</p>

  </div>

  <div class="Question">

    <p>The p tag 2</p>

  </div>

  <div class="Question">

    <p>The p tag 3</p>

  </div>

  <div class="Question">

    <p>The p tag 4</p>

  </div>

  <div class="Question">

    <p>The p tag 5</p>

  </div>

  <div class="Question">

    <p>The p tag 6</p>

  </div>

</div>