[MBTI 테스트(6)] QnA 화면 구현하기 (innerHTML, createElement, addEventListner)

https://youtu.be/Tlx_p3vExjo

 

 

Object 

 

QnA 리스트에 12개의 오브젝트가 있고

각각 Key, value로 구성되어있다.

 

Q라는 key에는 질문이 value로

A라는 key에는 세 가지의 대답이 value로

 

 

또 Type이라는 key에 value가 담겨있다.

이 type에 적힌 값을 알고리즘을 거쳐 답변이 구현되도록 한다.

 

 

innerHTML

아직은 무슨 말인지 잘 모르겠다.

 

우선 index.html 문서 내에

qna 섹션을 다음과 같이 작성해준다.

    <section id="qna">
      <div class = "qBox">
        
      </div>
      <div class="answerBox">
        
      </div>
    </section>

 

그 다음

start.js 에서 goNext()라는 새로운 함수를 만들어준다.

 

이 함수는 begin() 함수가 끝나기 직전에 실행되도록 해준다.

...
     goNext();
  }, 450);  
}

 

그 다음,

goNext() 함수에서 class가 qBox인 태그를 지정해준다.

function goNext(){
  var q = document.querySelector('.qBox');  
}

 

qBox라는 클래스를 가진 것은

qna section 아래 하나 뿐이다.

 

여기서,

미리 작성해둔 qnaList의 첫 번째 문항을 불러와보도록 한다.

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

 

index.html 파일에 추가하는 것 잊지말기!!

    <script src="./js/data.js" charset="utf-8"></script>

 

위와 같이

잘 표시되는 것을 확인할 수 있다.

 

즉 innerHTML 이란,

HTML 내에 입력하는 기능이라고 볼 수 있나보다.

 

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

goNext() 함수는

q를 querySelector로

qna 섹션 내 qBox를 선택해주고

 

그다음 q.innerHTML을 통해

q에 해당 내용을 입력해준다고 볼 수 있겠다.

 

위에서 qnaList[0] 은 해당 리스트의 첫 번째를 의미하는데,

위 화면에 있는 { 중괄호 } 내에 있는 전체가 첫 번째 [0]에 해당된다.

 

이 중에서 질문만 띄우고 싶으므로,

qnaList[0].q 라고 입력해주었다.

 

이렇게 key인 q를 입력하면

화면에는 해당 key의 value가 뜨게되고,

그게 바로 아래 화면이다.

 

위에서는 화면에 구현해보는 것을 확인하느라

[0]을 넣어주었지만, 실제로는 0에서 시작해서

점점 증가해야한다.

 

따라서 begin() 함수 내에서 호출해줄 때,

goNext()가 아닌 goNext(index)의 형태로 넣어준다.

 

begin()내에서 다음과 같이 호출해주고,

    let qIdx = 0;
    goNext(qIdx);

 

goNext 함수도 형태를 바꿔준다.

 

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

 

 

answerBox 만들기

질문은 위와 같이 만든다치고,

답변은 버튼으로 만들어서

클릭할 수 있게 한다.

 

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

goNext(qIdx) 함수 내에

qnaList[qIdx].a 를 통해

a를 출력해준다.

 

그리고 이 것을 for 문으로 반복해서 출력해준다.

반복문 내에 addAnswer()라는 함수를 넣어준다.

 

addAnswer() 함수

 

answer 섹션 내 div 태그 중 클래스가 answerBox인 곳을 a 라고 정의하고,

answer를 그 a 의 자식태그로 만들어 넣도록 한다.

 

위 이미지에 나온 것 처럼

<div>

<button>

</div> 이런식으로 만든다.

 

참고로 버튼을 만드는 기능은 다음과 같다.

 

각 버튼 내 답변의 value가 

function addAnswer(answerText){
  var a = document.querySelector('.answerBox');
  var answer = document.createElement('Button');
  a.appendChild(answer);
  answer.innerHTML = answerText;
}


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

 

이 부분 좀 헷갈리는데

어찌 구현은 되었다.

 

 

AddEventListner()

 

 

예시를 복사해준다.

 

el.addEventListener("click", function(){modifyText("four")}, false);

 

여기서 구현하고 싶은 동작은

버튼을 누르면 버튼 세개가 모두 사라지고

다음 문항으로 넘어가는 것이다.

 

  answer.addEventListener("click", function(){var children = }, false);

근데, 답변박스 세개를 변수로 지정해주지않아

queryselector로 지정해줄수가 없다.

 

따라서 다음 방법으로 해결한다.

function addAnswer(answerText){
  var a = document.querySelector('.answerBox');
  var answer = document.createElement('Button');
  answer.classList.add('answerList');

answer.classList.add('answerList')로

생성된 버튼을 리스트에 추가해준다.

 

  answer.addEventListener("click", function(){
    var children = document.querySelectorAll('.answerList');
    for(let i = 0; i < children.length; i++){
      children[i].disabled = true;
      children[i].style.display = 'none';
    }
  }, false);

 

버튼을 클릭하니 사라지고 q 만 남는것을 확인할 수 있다!

 

 

goNext(qIdx)에서 qIdx 값 1씩 증가하며 다음 문항으로 넘어가게하기

  for(let i in qnaList[qIdx].a){
    addAnswer(qnaList[qIdx].a[i].answer, qIdx);
  }

먼저 goNext() 함수 내에서

addAnswer를 불러올 때 qIdx도 변수로 넘겨준다.

 

이렇게 썼다는 것은

addAnswer에 두 개의 변수가 들어가야하므로

addAnswer 함수도 수정해준다.

 

function addAnswer(answerText, qIdx){
  var a = document.querySelector('.answerBox');
  var answer = document.createElement('Button');
  answer.classList.add('answerList');
  a.appendChild(answer);
  answer.innerHTML = answerText;
  
  answer.addEventListener("click", function(){
    var children = document.querySelectorAll('.answerList');
    for(let i = 0; i < children.length; i++){
      children[i].disabled = true;
      children[i].style.display = 'none';
    }
    goNext(++qIdx);
  }, false);
}

우선 addAnswer 함수에서 qIdx도 추가해주고

함수 마지막에 반복문이 끝난 이후 goNext 함수 내 qIdx를 1 증가해준다.

 

이렇게 하면

버튼을 누를 때

다음 문항으로 넘어가게된다.