inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기

Result 구현하기(2) + Result 디자인

result페이지에서 결과가 안 나와요

269

김다영

작성한 질문수 1

1

result 페이지로 넘어오면

결과값이 안뜨고 공유하기 버튼은 보입니다

계속 시도 해보니까 2가지만 뜨고 나머지 결과가 안 뜨는 것 같아요 오류랑 코드 올립니다...

도와주세요!!

const main = document.querySelector("#main");

const qna = document.querySelector("#qna");

const result = document.querySelector("#result");

 

const endPoint = 10; // 질문 개수

const select = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];

 

function calResult() {

 

    // select 배열에 있는 최대값 반환

    var result = select.indexOf(Math.max(...select));

    return result;

}

 

function setResult(){

    let point = calResult();

    const resultName = document.querySelector('.resultName');

    var name = infoList[point].name;

    name = name.replace(/, /ig, '<br>');

    resultName.innerHTML = name;

 

 

    var resultImg = document.createElement('img');

    const imgDiv = document.querySelector('#resultImg');

    var imgURL = 'img/image-' + point + '.png';

    resultImg.src = imgURL;

    resultImg.alt = point;

    resultImg.classList.add('img-fluid');

    imgDiv.appendChild(resultImg);

 

    const resultDesc = document.querySelector('.resultDesc');

    resultDesc.innerHTML = infoList[point].desc;

}

 

 

function goResult() {

    qna.style.WebkitAnimation = "fadeOut 0.7s";

    qna.style.animation = "fadeOut 0.7s";

    setTimeout(() => {

        result.style.WebkitAnimation = "fadeIn 0.7s";

        result.style.animation = "fadeIn 0.7s";

        setTimeout(() => {

            qna.style.display = "none";

            result.style.display = "block";

        }, 300)

    })

    setResult();

}

 

// 답변 버튼 만들기

function addAnswer(answerText, qIdx, idx) {

    var a = document.querySelector('.answerBox');

    var answer = document.createElement('button');

    // 답변 버튼에 클래스 추가

    answer

        .classList

        .add('answerList');

    answer

        .classList

        .add('my-3');

    answer

        .classList

        .add('py-3');

    answer

        .classList

        .add('mx-auto');

    answer

        .classList

        .add('fadeIn');

 

    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.WebkitAnimation = "fadeOut 0.5s";

            children[i].style.animation = "fadeOut 0.5s";

        }

        setTimeout(() => {

            var target = qnaList[qIdx].a[idx].type;

            for (let i = 0; i < target.length; i++) {

                select[target[i]] += 1;

            }

 

            for (let i = 0; i < children.length; i++) {

                children[i].style.display = "none";

            }

            goNext(++qIdx);

        }, 450);

    }, false);

}

 

// 질문과 답변 불러오기

function goNext(qIdx) {

    // 마지막 질문일 때 호출 후 리턴

    if (qIdx === endPoint) {

        goResult();

        return;

    }

    var q = document.querySelector('.qBox');

    q.innerHTML = qnaList[qIdx].q;

    for (let i in qnaList[qIdx].a) {

        addAnswer(qnaList[qIdx].a[i].answer, qIdx, i);

    }

    var status = document.querySelector('.statusBar');

    status.style.width = (100 / endPoint) * (qIdx + 1) + '%';

 

}

 

// main 페이지에서 qna 페이지로 화면 전환

function begin() {

    main.style.WebkitAnimation = "fadeOut 0.7s";

    main.style.animation = "fadeOut 0.7s";

    setTimeout(() => {

        qna.style.WebkitAnimation = "fadeIn 0.7s";

        qna.style.animation = "fadeIn 0.7s";

        setTimeout(() => {

            main.style.display = "none";

            qna.style.display = "block";

        }, 300)

        let qIdx = 0;

        goNext(qIdx);

    }, 300);

}

 

 

javascript bootstrap HTML/CSS

답변 1

0

판다코딩

setResult 함수에서 console.log로 name을 찍어보시겠어요..?

이렇게 코드 전체를 올려주셔도 프로젝트를 직접 보지 않은 이상

제가 어느 곳에서 에러가 있는지 정확히 파악하기 힘드네요 ㅠㅠ!

지금 올려주신 크롬 화면을 살펴보면 name을 선언하고 사용하는 과정에서 에러가 발생하는 것 같습니다.

emmet 에디터 설치 하려고 하는데 안 나오네요

0

166

2

결과 이미지랑 글이 안떠요 왜일까요

0

142

1

select 배열 이해를 도와주세요!

0

377

1

result 에서 결과가 안 나와요.

0

376

1

결과 계산하기에서 콘솔이 다르게 찍힙니다.

0

401

1

다음 버튼을 누르면 다음질문으로 넘어가게 만들고 싶어요.

0

387

1

클론코딩 시

0

372

1

결과페이지 선택값 합산하기

0

355

1

select 부분이 이해가 안가서 질문드립니다 ㅠ

0

390

1

index에서 result 페이지로 이동 질문드립니다.

0

435

1

진행바 강의에서요 스테이터스바가 짤립니다

0

380

1

이미지버전에서 부트스트랩 이미지하고 텍스트도 이용하고 싶어요

0

526

1

viewport 가 제대로 작동을 안해요 뭐가 문제일까요?

0

483

1

결과 페이지별 개별링크버튼 추가

0

359

1

뒤로가기

0

425

1

netlify not found 오류

1

1064

1

아톰 에디터 설치

2

949

1

display:block을 사용하는 이유

1

461

1

qIdx수에 따라 for 문이 돌아요 ㅜ.ㅜ

1

385

1

카카오톡 공유하기

1

588

1

질문 개수 5개에 결과 4개

0

433

1

질문 수를 줄이는 방법

1

392

1

강의 순서

1

271

1

결과페이지에서 result-0,1,23,....html 호출하기

1

356

1