result구현 오류... 질문드립니다.

두가지 오류가 있는거같습니다.

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

이런식으로 선언 했지만, +=연산을 돌린후 (안되길래 깃헙의 코드 그대로 복붙을 했음에도,,) 문자취급이 되어서 위 사진처럼 됩니다.

또한, vlet point = calResult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name;

이코드에서도 name 프로퍼티를 찾을수 없다고 합니다.. 이유를 잘 모르겠습니다..

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/animation.css">
  <link rel="stylesheet" href="./css/default.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./css/qna.css">
  <link rel="stylesheet" href="./css/result.css">

</head>

<body>
  <div id="container">
    <section id="main" class="mx-auto mt-5 py-5 px-5 mb-5">
      <h1>십이간지로 알아보는 연애유형</h1>
      <div class="col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">
        <img src="./img/main.png" alt="mainImage" class="img-fluid">
      </div>
      <p>Lorem ipsum dolor sit amet</p>
      <button type="button" class="btn btn-outline-danger mt-4" onclick="js:start()">시작하기</button>
    </section>


    <section id="qna">
      <div class="status mx-auto mt-5">
        <div class="statusBar">

        </div>
      </div>
      <div class="qBox mt-5 mx-4 mx-auto mb-5">

      </div>
      <div class="answerBox">


      </div>
    </section>

    <section id="result">
      <h1>당신의 결과는...!</h1>
      <div class="resultname">

      </div>
      <div class="resultImg col-lg-6 col-md-8 col-sm-10 col-12 mx-auto">

      </div>
      <div class="resultDesc">

      </div>
      <p>Lorem ipsum dolor sit amet</p>
      <button type="button" class="btn btn-outline-danger mt-4" onclick="js:start()">share</button>
    </section>
  </div>
  <script src="./js/data.js" charset="utf-8"></script>
  <script src="./js/start.js" charset="utf-8"></script>
</body>

</html>

ㅇ

const main = document.querySelector("#main");
const qna = document.querySelector("#qna");
const listrange = 12;

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



function calResult(){
  console.log(select);
  var result = select.indexOf(Math.max(...select));
  console.log(result);

  return result;
}

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

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

  const resultDesc = document.querySelector(".resultDesc");
  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);
  }, 450);
  console.log(select);
  calResult();
  setResult();
}

function addAnswer(anstext, qIdx, idx) {
  var a = document.querySelector(".answerBox");
  var answer = document.createElement("button");
  answer.classList.add("answerList");
  answer.classList.add("py-3");
  answer.classList.add("my-3");
  answer.classList.add("mx-auto");
  answer.classList.add("fadeIn");
  a.appendChild(answer);
  answer.innerHTML = anstext;

  answer.addEventListener("click", function() {
    select[qIdx] = idx;
    console.log(idx)

    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 < 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 === listrange) {
    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 / listrange) * (qIdx + 1) + '%'
}

function start() {
  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";
      var qIdx = 0;
      goNext(qIdx);
    }, 450);
  }, 450);
}

인프런 커뮤니티 질문&답변