판다님 응용방법이 궁금합니다

음.. 제가 이해력이 부족한 것 같습니다.

제가 만들어드린 코드와..? 질문자님이 원하시는 코드의 방향이 무엇이 다른지 잘 모르겠네요,

제가 만들어드린 코드는 상위 5개의 값을 선택하여 보여주는 코드입니다.

모든 결과를 그대로 출력을 원하신다면 그러한 과정없이 바로 출력하면 되는 것 아닐까요..?

index.html

<section id="result" class="mx-auto my-5 py-5 px-3">
      <h1>당신의 결과는?!</h1>
      <div class="resultname">

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

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

      </div>
      <div class="row mt-3 mx-auto" style="width: 50%">
        <div id="allResult" class="col-6">

        </div>
        <div class="col-6">
          <button class="btn btn-outline-danger" onclick="js:copy()">복사하기</button>
        </div>
      </div>
      <button type="button" class="kakao mt-3 py-2 px-3" onclick="js:setShare()">공유하기</button>
    </section>

start.js

function calResult() {
  console.log(select);
  //결과 출력을 위한 최대값
  var result = select.indexOf(Math.max(...select));
  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;
  resultImg.classList.add("img-fluid");
  imgDiv.appendChild(resultImg);
  const resultDesc = document.querySelector(".resultDesc");
  resultDesc.innerHTML = infoList[point].desc;

  //추가되는 코드
  const allResultDiv = document.querySelector("#allResult");
  allResultDiv.innerHTML = select;
}

share.js

function copy() {
  var tempElem = document.createElement("textarea");
  var target = document.querySelector("#allResult");
  tempElem.value = target.innerHTML;
  document.body.appendChild(tempElem);
  tempElem.select();
  document.execCommand("copy");
  alert("복사되었습니다.");
  document.body.removeChild(tempElem);
}

코드가 상당히 복잡해질 수 있습니다.

사용자의 응답 결과에 따라 상위 다섯개의 값이 모두 유효한지 부터 알아보아야 합니다.

(어떠한 경우의 수로 응답을 하든, 5개의 결과가 모두 유효하다면 그냥 단순히 5개만 출력하면 됩니다.)

또한 현재 질문자님의 경우에선..

배열의 인덱스 뿐만 아니라

그 값 역시 필요한 경우이기에 배열의 선언을 object 형태로 하는 것이 더 쉬울 수도 있습니다.

저희가 data.js에서 만든 형태의 데이터형이 object 자료형이나,

해당 자료형에 대한 지식이 없다고 가정하여 코드를 만들어 본다면..

function calResult() {
  //배열 큰 순으로 정렬
  let sortArray = select.sort((a, b) => {
    if (a > b) {
      return -1;
    }
    if (a < b) {
      return 1;
    }
    return 0;
  });
  let maxIdx;
  //최대 5개의 결과만 필요하므로
  for (let i = 0; i < 5; i++) {
    //첫번째, 두번째, 세번째, 네번째, 다섯번째의 값이 0이면
    if (sortArray[i] === 0) {
      //반복문 탈출
      break;
    }
    //maxIdx에 몇번째 결과까지 표현할지 저장
    maxIdx = i;
  }
  console.log(maxIdx, sortArray[maxIdx]);
  //결과의 index배열
  let resultArray = [];
  //결과의 값배열
  let resultValueArray = [];

  for (let i = 0; i < maxIdx; i++) {
    //tempIdx : select배열에서 가장 높은 값의 인덱스
    var tempIdx = select.indexOf(Math.max(...select));
    //tempValue : select배열에서 가장 높은 값
    var tempValue = select[tempIdx];

    //두값을 각 배열에 저장
    resultArray.push(tempIdx);
    resultValueArray.push(tempValue);

    //저장된 값 0으로 초기화
    //다음 반복에서 저장된 값을 제외한 최대값을 찾아야 하므로
    select[tempIdx] = 0;
  }
  //이중배열로 반환
  return [resultArray, resultValueArray];
}

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

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

  const resultDesc = document.querySelector(".resultDesc");
  for (let i = 0; i < point[0].length; i++) {
    let tempSpan = document.createElement("span");
    if (i + 1 != point[0].length)
      tempSpan.innerHTML =
        infoList[point[0][i]].name + " : " + point[1][i] + " / ";
    else tempSpan.innerHTML = infoList[point[0][i]].name + " : " + point[1][i];
    resultDesc.appendChild(tempSpan);
  }
}

이렇게 될 것 같습니다.

결과 페이지는 이렇게 나오겠네요.

1. sorting된 데이터를 모두 보여주면 될 듯 합니다.

2. 저희는 최대값을 찾기위해 정렬하므로, 0번째 인덱스의 값과 1번째 인덱스의 값이 같을 시 (동점이므로) 두 데이터를 모두 뛰우는 방식으로 코딩을 바꿔볼 수 있을 것 같습니다.

3. 2번의 과정에서 if문의 내용만 조금 바뀔 것 같습니다.

4. 어떤 이유로 위와 같은 버그가 발생하는지 잘 모르겠으나, 아마 애니메이션이 진행되는 동안의 터치 입력이 무시되는 것 같습니다. 저희는 setTimeout을 통해 애니메이션이 끝난 이후 버튼을 생성합니다. 이러한 과정이 불편하시다면 애니메이션을 제거하시고 마찬가지로 setTimeout도 제거하시면 될 것 같습니다.

-

제 수업을 통해서 js를 입문하셨다면, 1~3번에 대한 대답이 충분치 않을 수도 있을 것 같습니다.

현재 코드를 첨부해주시거나, 보다 정확히 구현하시고 싶으신 내용을 말씀해주시면 더 도와드리겠습니다.

먼저 개발자 도구에서 값이 출력되는 것은 console.log로 저희가 의도적으로 값을 출력했기 때문입니다.

어떤 데이터를 console로 출력하셨을까요?.