QnA 페이지 표시

1. 링크 data.js

index.html 바디 끝 바로 위에 입력

    <!-- 자바스크립트링크-->
    <script src="js/data.js"></script>
    <script src="js/start.js"></script>

2. 콘솔창에서 배열 객체(object) 확인

qnaList
(12) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

qnaList[0].a
(3) [{…}, {…}, {…}]0: {answer: "a. 이성 사이에 친구가 어딨어? 절대 없어", type: Array(4)}1: {answer: "b. 친구 있지, 절대 이성으로만 안 보일뿐", type: Array(6)}2: {answer: "c. 난 잘 모르겠어..", type: Array(2)}length: 3[[Prototype]]: Array(0)
qnaList[0].q
"1. 이성 사이에 진정한 친구는 있다, 없다?"

3. qna 섹션 index.html

    <section id="qna">
      <div class="status mx-auto mt-5">
        <div class="statusBar">
        </div>
      </div>
      <div class="qBox my-5 py-3 mx-auto">

      </div>
      <div class="answerBox">

      </div>
    </section>

4. start.js에 goNext 함수 만들기

function goNext() {
  var q = document.querySelector('.qBox');
  q.textContent = qnaList[0].q;
}

호출 goNext();는 start.js 맨 아래쪽에 적어준다.

goNext();

5. 함수에 매개변수 넣기

function goNext(qIdx) {
  var q = document.querySelector('.qBox');
  q.textContent = qnaList[qIdx].q;
}

let qIdx = 0;
goNext(qIdx);

6. 질문과 함께 답변들을 출력(버튼태그 넣기)

function goNext(qIdx) {
  var q = document.querySelector('.qBox');
  q.textContent = qnaList[qIdx].q;
  for (let i in qnaList[qIdx].a) {
    addAnswer(qnaList[qIdx].a[i].answer)
  }
}

function addAnswer(answerText) {
  var a = document.querySelector('.answerBox');
  var answer = document.createElement('button');  //버튼 태그를 만든다.
  a.appendChild(answer);                          //a 아래에 버튼을 붙인다.
  answer.textContent = answerText;                //버튼의 내용 입력
}