Math.floorを使用して利益計算結果を出力させたい

javascriptで利益計算の処理を行っているのですが、販売手数料を出した後の販売利益がNaNになってしまいます。

販売手数料まで表示されています。

window.addEventListener("load",()=>{

  const priceInput = document.getElementById("item-price");
  priceInput.addEventListener("input", () => {
    const inputValue = priceInput.value;
    console.log(inputValue);

    const addTaxDom = document.getElementById("add-tax-price")
    addTaxDom.innerHTML = (Math.floor(inputValue * 0.1));
     console.log(addTaxDom);

    const profitNumber = document.getElementById("profit")
    profitNumber.innerHTML = (Math.floor(inputValue - addTaxDom));
      console.log(profitNumber);
  })
})

html
1div class="sell-price">
2      <div class="weight-bold-text question-text">
3        <span>販売価格<br>(¥300〜9,999,999)</span>
4        <a class="question" href="#">?</a>
5      </div>
6      <div>
7        <div class="price-content">
8          <div class="price-text">
9            <span>価格</span>
10            <span class="indispensable">必須</span>
11          </div>
12          <span class="sell-yen">¥</span>
13          <%= f.text_field :hoge, class:"price-input", id:"item-price", placeholder:"半角数字で記入" %>
14        </div>
15        <div class="price-content">
16          <span>販売手数料 (10%)</span>
17          <span>
18            <span id='add-tax-price'></span>円
19          </span>
20        </div>
21        <div class="price-content">
22          <span>販売利益</span>
23          <span>
24            <span id='profit'></span>円
25        </div>
26        </span>
27      </div>
28    </div>

よろしくお願いします。

yambejp

2020/10/19 07:45 編集

計算部分はjavaじゃなくてjavascriptでは？

toratail

2020/10/19 07:46

修正しました。

yambejp

2020/10/19 07:49

item-priceの部分を生のHTMLで書いてください

m.ts10806

2020/10/19 07:49

質問本文も修正してください。 >javaで利益計算の処理を行っているのですが

toratail

2020/10/19 07:54

生のHTMLとはなんでしょうか

yambejp

2020/10/19 08:46

<%= ・・・ %> の記載がおそらくサーバーサイドの処理でかいていますよね？回答者の環境では再現できません。たぶんこんな感じなのでしょうけど・・・ <input type="text" name="hoge" class="price-input" id="item-price" placeholder="半角数字で記入">

行動規範の内容に同意します

回答2件

自己解決

profitNumber.innerHTML = (Math.floor(inputValue - addTaxDom));

という記述の中で、　addTaxDomが代入されているのは

(Math.floor(inputValue * 0.1));

上記が文面ごと代入されてしまっていた。

なので、50の数値だけを取り出すようにvalueを定義し

const profitNumber = document.getElementById("profit")
    const value_result = inputValue * 0.1
    console.log(value_result)
    profitNumber.innerHTML = (Math.floor(inputValue - value_result));
      console.log(profitNumber);

このように再導入してあげる形にすればaddTaxDomの数値が受け取れ計算ができる。

投稿2020/10/19 08:59

toratail

総合スコア12

多分こんな感じです

javascript
1const addTaxValue=(Math.floor(inputValue * 0.1));
2addTaxDom.innerHTML = addTaxValue;
3・・・
4profitNumber.innerHTML = (Math.floor(inputValue - addTaxValue));