【Rails 앱】 판매 수수료를 JavaScript로 계산하려고하면 나오는 "NaN"을 해결할 수 있었으므로 비망록으로 남겨 둡니다.

실수 내용

입력된 금액의 판매 수수료(10%)를, JavaScript를 사용해 계산하려고 하는 구현을 실시하고 있을 때 갑자기 나타난 「NaN」.
첫 번째 코드는 다음과 같습니다.

function calc (){
  // id="item-priceの要素を取得。
  const itemPrice = document.getElementById("item-price");
  // 値が入力された時にイベントを発火。
  itemPrice.addEventListener('input', function(){
    const Tax = 0.1;
    const tax_fee = itemPrice * Tax;
    const profit = itemPrice - tax_fee;
    const taxArea = document.getElementById("add-tax-price");
    const profitArea = document.getElementById("profit");
    taxArea.innerHTML = tax_fee;
    profitArea.innerHTML = profit;
  })
}

window.addEventListener('load', calc)

원인

NaN = Not-a-Number(숫자가 아님)
계산하려고 하는 값이 숫자가 되어 있지 않다고 전하고 있는 것 같습니다.

위의 코드라면,
getElementById로 취득한 「요소」와,
Tax=0.1이라고 하는 「수치」를 곱셈하려고 하고 있다.

즉, 요소의 값을 취득한 후,
「수치」와 「수치」를 곱해야 합니다＞＜

해결책

itemPrice.value에서 요소의 "값(=숫자)"을 가져옵니다.

function calc (){
  // id="item-priceの要素を取得。
  const itemPrice = document.getElementById("item-price");
  // 値が入力された時にイベントを発火。
  itemPrice.addEventListener('input', function(){
    // 下記を追記して、要素の値を取得。
    const itemPriceValue = itemPrice.value
    const Tax = 0.1;
    const tax_fee = itemPriceValue * Tax;
    const profit = itemPriceValue - tax_fee;
    const taxArea = document.getElementById("add-tax-price");
    const profitArea = document.getElementById("profit");
    taxArea.innerHTML = tax_fee;
    profitArea.innerHTML = profit;
  })
}

window.addEventListener('load', calc)

이제 "NaN"이 사라지고 계산 기능을 구현할 수있었습니다!

결론

처음, 「NaN」은 난이야, , , 라고 생각했습니다만, 요소와 수치는 곱할 수 없다고 하는 초보적인 실수였습니다.

이 실수를 해설해 준 멘토 씨가 말한 'JavaScript는 HTML을 가볍게 돌리는 언어다'의 한마디가 왠지 가슴에 찔렸습니다 ^^

프로그래밍은 재미 있습니다. 더 잘 사용하고 싶습니다.