我陷入困境，需要你的幫助！我是 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>
2 回答
侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
我想訪問所有 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>
桃花長相依
TA貢獻1860條經驗 獲得超8個贊
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>
- 2 回答
- 0 關注
- 131 瀏覽
添加回答
舉報
0/150
提交
取消