如何使用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() {&nbsp; var x = "";&nbsp; x = document.getElementsByClassName("questions")[0];&nbsp; if (x.style.display === "none") {&nbsp; &nbsp; x.style.display = "block";&nbsp; }&nbsp; const ul = document.querySelector('ul#list');&nbsp; document.querySelectorAll('.Question p').forEach((element) => {&nbsp; &nbsp; const li = document.createElement('li');&nbsp; &nbsp; li.innerText = element.innerText;&nbsp; &nbsp; ul.appendChild(li)&nbsp; })}<ul id="list"></ul><button id="startbtn" onclick="myfunction()">Start </button><div class="questions" style="display:none">&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 1</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 2</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 3</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 4</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 5</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 6</p>&nbsp; </div></div>

Answer 2

document.getElementsByClassName返回一个数组。试试这个 - 它将获得该类的第一个元素.questionsx&nbsp;=&nbsp;document.getElementsByClassName("questions")[0];Document 接口的方法getElementsByClassName返回具有所有给定类名的所有子元素的类似数组的对象。https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassNamefunction myfunction() {&nbsp; var x = "";&nbsp; x = document.getElementsByClassName("questions")[0];&nbsp; if (x.style.display === "none") {&nbsp; &nbsp; x.style.display = "block";&nbsp; }&nbsp; const ul = document.querySelector('ul#list');&nbsp; document.querySelectorAll('.Question p').forEach((element) => {&nbsp; &nbsp; const li = document.createElement('li');&nbsp; &nbsp; li.innerText = element.innerText;&nbsp; &nbsp; ul.appendChild(li)&nbsp; })}<ul id="list"></ul><button id="startbtn" onclick="myfunction()">Start </button><div class="questions" style="display:none">&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 1</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 2</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 3</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 4</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 5</p>&nbsp; </div>&nbsp; <div class="Question">&nbsp; &nbsp; <p>The p tag 6</p>&nbsp; </div></div>