자바 스크립트를 사용하여 버튼을 클릭 할 때 ul에 여러 div의 p 태그 내용을 표시하는 방법

Baaz Tech

나는 상황에 갇혀 있고 당신의 도움이 필요합니다! 나는 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>
Rajesh

모든 p 태그의 내용에 액세스하여 클래스 이름을 목록으로 갖는 ul 내에 표시하고 싶습니다.

생각

  • 모든 질문 가져 오기
  • 그것들을 반복하고 li태그를 생성 합니다.-이렇게하려면 p's innerTextli's 로 설정해야합니다.innerText
    • 그런 다음 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>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관