sizecompare NaN error

[baaaam771]

내가 지정한 옷의 사이즈 비교를 위해 치수 값을 가져왔다 근데 NaN이 뭐람?

Originally posted by @baaaam771 in https://github.com/ProjectFFF/FFF/issues/21#issuecomment-713474309

[baaaam771]

코드 내용은 closets/templates/compare.html 파일에 들어가 있어

closets/templates/new.html에서 객체를 등록하면

closets/templates/record.html에서 모든 객체 불러옴

여기서 Newcloth 모델에 들어가있는 일부 필드 값을 closets/templates/compare.html 로 불러옴

closets/templates/compare.html의 원형은 sizecompares/templates/sizecompares.html에 있어

feature 브랜치에 있어

[CitrusSoda]

closets/templates/compare.html

https://github.com/ProjectFFF/FFF/tree/master/closets/templates 깃허브에 안올라와있넴

[baaaam771]

console.log로 뜯어본 결과 parseFloat 이게 문제였다. 어떤 값을 넣어도 NaN이라는 결과가 나왔다. 그럼 이것만 지워주면 되는건가? 그건 또 아니었다. 하나는 input 값이지만 두번째 값은 내가 Newcloth에서 가져온 필드 값이었다. 그렇기 때문에 둘의 숫자 값을 다르게 가져와야했다. 먼저 첫번째 input 값은 const shoulder1 = document.getElementById("shoulder1"); 해서 태그 안의 전체 값을 가져오고 그안의 value 값을 따로 추출하였다. const f_rs = shoulder1.value - shoulder2;

하지만필드에서 가져온 shoulder2는 input 값이 아니라 그냥 <p>46.000</p> 이런식으로 묶여있어서 p 태그 안의 속성 값이 아니라 그냥 안에 있는 텍스트를 가져와야 한다는 것을 알았다. 그래서 구글링을 했고 그 결과 찾게 되는 것은 InnerTEXT 그냥 안에 텍스트 값을 추출하는 역할 그래서 바로 적용

const t_shoulder2 = document.getElementById("shoulder2");
const shoulder2 = t_shoulder2.innerText;

이렇게 해서 안의 숫자 값만 가져왔고 value 값만 따로 가져오지 않아도 됐다. const f_rs = shoulder1.value - shoulder2; 그래서 최종 만들어진 내용을 보면

  const shoulder1 = document.getElementById("shoulder1");
  const t_shoulder2 = document.getElementById("shoulder2");
  const shoulder2 = t_shoulder2.innerText;
  const sh_result = document.getElementById("sh_result");
  const POSITIVE_COLOR = "#3498db";
  const NEGATIVE_COLOR = "#e74c3c";
  const BASE_COLOR = "#1e272e";

  function result_shoulder() {
    const f_rs = shoulder1.value - shoulder2;
    const rs = parseFloat(f_rs.toFixed(3));
    sh_result.innerHTML = rs;
    if (-3 <= rs && rs <= 3) {
      sh_result.style.color = POSITIVE_COLOR;
    } else {
      sh_result.style.color = NEGATIVE_COLOR;
    }
  }

그리고 작동 성공