我陷入困境，需要你的幫助！我是 js 新手，所以我一直堅(jiān)持下去?；旧?，我正在制作一個(gè)測(cè)驗(yàn)頁面。打開時(shí)應(yīng)該只顯示一個(gè)開始按鈕。單擊該按鈕時(shí)，應(yīng)顯示包含課堂問題的 div 中的內(nèi)容。同時(shí)單擊按鈕時(shí)，我想訪問所有 p 標(biāo)簽的內(nèi)容并將其顯示在 ul 中，以類名作為列表。請(qǐng)幫我。這是代碼<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>
2 回答
侃侃爾雅
TA貢獻(xiàn)1801條經(jīng)驗(yàn) 獲得超16個(gè)贊
我想訪問所有 p 標(biāo)簽的內(nèi)容并將其顯示在 ul 中，并將類名作為列表。
主意
獲取所有問題
循環(huán)它們并創(chuàng)建
li標(biāo)簽 - 為此，您必須將p's設(shè)置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>
桃花長(zhǎng)相依
TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超8個(gè)贊
document.getElementsByClassName返回一個(gè)數(shù)組。試試這個(gè) - 它將獲得該類的第一個(gè)元素.questions
x = document.getElementsByClassName("questions")[0];Document 接口的方法
getElementsByClassName返回具有所有給定類名的所有子元素的類似數(shù)組的對(duì)象。
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>
- 2 回答
- 0 關(guān)注
- 142 瀏覽
添加回答
舉報(bào)
0/150
提交
取消