QnAページを表示

1.データをリンクします。js

index.html本体末尾の真上に入力

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

2.コンソールウィンドウでタイルオブジェクト(オブジェクト)を確認する

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パーティションインデックス。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()を呼び出します.開始します.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;                //버튼의 내용 입력
}