inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

result 에서 결과가 안 나와요.

365

yunjij999

작성한 질문수 1

0

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

resultname, resultdesc가 안 뜨는데

이미지는 선택된 결과 제대로 뜨는 걸로 봐선 알고리즘엔 문제가 없는데 어디서 잘못된 걸까요?

 제 코드는 이렇습니다.

 

const main = document.querySelector("#main");
const qna = document.querySelector("#qna");
const result = document.querySelector("#result");
const endpoint = 6;
const select = [0, 0, 0, 0, 0, 0];

function claResult() {
    console.log(select);
    var result = select.indexOf(Math.max(...select));
    return result;
}

function setResult() {
    console.log(name);
    let point = claResult();
    const resultname = document.querySelector('.resultname');
    resultname.innerHTML = infoList[point].name;

    var resultImg = document.createElement('img');
    const imgDiv = document.querySelector('#resultImg');
    var imgURL = '../image/image-' + point + '.png';
    resultImg.src = imgURL;
    resultImg.alt = point;
    resultImg.classList.add('img-fluid');
    imgDiv.appendChild(resultImg);

    const resultDesc = document.querySelector('.resultDese');
    resultDesc.innerHTML = infoList[point].desc;
}

function goResult() {
    qna.style.WebkitAnimation = "fadeOut 1s";
    qna.style.animation = "fadeOut 1s";
    setTimeout(() => {
        result.style.WebkitAnimation = "fadeIn 1s";
        result.style.animation = "fadeIn 1s";
        setTimeout(() => {
            qna.style.display = "none";
            result.style.display = "block";
        }, 450)
    })
    setResult();
}

function addAnswer(answerText, qIdx, idx) {
    var a = document.querySelector('.answerBox');
    var answer = document.createElement('button');
    answer.classList.add('answerList');
    answer.classList.add('mx-8');
    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) + '%';
}


function begin() {
    main.style.WebkitAnimation = "fadeOut 1s";
    main.style.animation = "fadeOut 1s";
    setTimeout(() => {
        qna.style.WebkitAnimation = "fadeIn 1s";
        qna.style.animation = "fadeIn 1s";
        setTimeout(() => {
            main.style.display = "none";
            qna.style.display = "block";
        }, 450)
        let qIdx = 0;
        goNext(qIdx);
    }, 450);
}

스크린샷 2023-11-06 021539.png

 

HTML/CSS javascript bootstrap

답변 1

0

인프런 AI 인턴

안녕하세요 yunjij999 님, 인프런 AI 인턴이에요.

결과가 나오지 않는 문제의 원인을 찾기 위해 코드를 살펴보았는데, goResult() 함수에서 결과를 설정하는 부분이 문제가 될 수 있습니다. 현재 코드에서는 name 변수가 정의되어 있지 않고 사용되고 있어서 결과가 나타나지 않는 것으로 보입니다.

아래의 코드를 확인해보세요.

    console.log(name);
    let point = claResult();
    const resultname = document.querySelector('.resultname');
    resultname.innerHTML = infoList[point].name;

위의 코드에서 console.log(name); 부분을 console.log(point);로 변경해보세요. 그리고 resultname.innerHTML에 대입하는 값이 올바른지 확인해주세요. 이 부분을 수정한 뒤 다시 실행해보시면 결과가 제대로 나타날 수 있을 것입니다.

그리고 이미지를 선택하는 부분도 문제가 있을 수 있습니다. imgURL 변수에 값을 대입하기 전에 imgURL 변수에 올바른 경로가 들어가 있는지 확인해주세요. 경로가 올바르지 않으면 이미지가 나타나지 않을 수 있습니다.

문제를 해결하지 못하신다면 추가적인 정보를 제공해주시거나 코드의 다른 부분도 확인할 수 있도록 해주세요. 감사합니다.

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

0

154

2

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

0

132

1

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

0

366

1

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

0

388

1

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

0

375

1

클론코딩 시

0

367

1

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

0

351

1

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

0

384

1

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

0

430

1

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

0

377

1

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

0

510

1

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

0

481

1

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

0

352

1

뒤로가기

0

422

1

netlify not found 오류

1

1051

1

아톰 에디터 설치

2

934

1

display:block을 사용하는 이유

1

449

1

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

1

373

1

카카오톡 공유하기

1

580

1

질문 개수 5개에 결과 4개

0

426

1

질문 수를 줄이는 방법

1

390

1

강의 순서

1

268

1

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

1

354

1

배열 내 줄바꿈

1

598

1