결과 화면

1. calResult 결과를 key값으로 리턴

return resultArray[11].key;

2. 키값으로 infoList의 결과를 출력

function setResult() {
  let key = calResult();
  const resultName = document.querySelector('.resultname');
  resultName.textContent = infoList[key].name;

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

  const resultDesc = document.querySelector('.resultDesc');
  resultDesc.textContent = infoList[key].desc;
}

3. goResult 실행시 마지막에 setResult()

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

4. result.css

#result{
  display: none;
  background-color: whitesmoke;
  width: 80%;
  text-align: center;
  border-radius: 20px;
}

#shareResult{
  background-color: whitesmoke;
  width: 80%;
  text-align: center;
  border-radius: 20px;
}

.resultname{
  font-size: 26px;
}

.resultDesc{
  font-size: 20px;
}

.kakao{
  color: white;
  background-color: #FEE500;
  font-size: 20px;
  border: 0px;
  border-radius: 20px;
}

.kakao:hover, .kakao:focus {
  background-color: whitesmoke;
  color: #FEE500;
}

.gohome{
  color: white;
  background-color: pink;
  font-size: 20px;
  border: 0px;
  border-radius: 20px;
}

.gohome:hover, .gohome:focus {
  background-color: whitesmoke;
  color: pink;
}