手数料計算のためのjavascript実装手順

![20210416-140042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/e458fc7e-00bb-82ca-fd33-9a98753a3699.png)
furimaアプリの実装中です。

Javascriptの手数料計算自動化の実装中です。

Javascriptファイルを作る
-

**①-1:furimaApp/app/javascript/packs内にファイルを置きます。**
**①-2:application.jsファイル内に記述呼び出しの記述をします**

|書き方|
|---|
|**const 変数 = require( モジュール名 );**|

**①−３ブラウザ上いったんファイル呼び出し確認を行います**
（注意）railsファイルがきちんとかけていて呼び出せる（綺麗に表示できていること）が前提です。

```java:fee_calculation.js
window.addEventListener('load', () => {
  console.log("OK");
});
```

###**①−４ブラウザを開いたら「command＋option+j」**

![20210416-140042.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/2f512536-cb64-a5e9-ce9f-abae6cbe61ab.png)


consoleタブでOKとファイル名があれば表示確認OKです。

①販売価格を　Viewファイルから取得する
-
@amamamaouさんありがとうございます。参考になります。

>https://qiita.com/amamamaou/items/25e8b4e1b41c8d3211f4

|目的|メソッド|返り値|
|--|--|--|
|要素が取得|document ．getElementById（ ” id 名 ” ）；|HTMLElement / null

参照：UX　MILKさん　「JavaScriptでidから要素を取得する方法：getElementById()」
>https://uxmilk.jp/11593


```HTML:HTML
体重を入力して下さい:<input type="text" id="id01"><br/>
身長をメートルで入力して下さい:<input type="text" id="id02"><br/>
<input type="button" value="計算" onclick="calcBmi();">
```

```javascript:javascript
//入力された体重と身長からBMI値を計算するプログラム
function calcBmi(){
        // idが「id01」のテキストボックスに入力された値を取得して変数weightに代入
	var weight = document.getElementById('id01').value; 
	var height = document.getElementById('id02').value;
	weight = Number(weight); // 入力された文字列を数値に変換する
	height = Number(height); // 入力された文字列を数値に変換する
	var bmi = height / (weight * weight); // BMIを計算
	alert("あなたのBMI値は" + bmi + "です。"); // 結果を表示
}
```


②どの時点で取得（発火）するのか決める:イベントハンラー
-

@_ayk_studyさん参考にさせていただきました。
>https://qiita.com/_ayk_study/items/519bb661a746f96727ce

addEventListenerの書き方

```javascript:javascript
オブジェクト(対象の要素).addEventListener('イベント名',function(){処理内容},false)
```

イベントとはトリガー（拳銃の引き金）のことでいつ発生させるのかのきっかけ【タイミング】のことです。

参考


|イベント種類|内容
|--|--|
|load|Webページの読み込みが完了した時に発動（画像などのリソースすべて含む）
|click|マウスボタンをクリックした時に発動
|mousedown|マウスボタンを押している時に発動
|mouseup|マウスボタンを離したときに発動
|mousemove|マウスカーソルが移動した時に発動
|keydown|キーボードのキーを押したときに発動
|keyup|キーボードのキーを離したときに発動
|keypress|キーボードのキーを押している時に発動|
|submmit|フォームのsubmitボタンを押したときに発動|
|scroll|画面|

①＋②(これはエラーになります)
-

```javascript:fee_calculation.js
const priceInput = document.getElementById("金額を入力する場所のid");
priceInput.addEventListener("input", () => {
   console.log("イベント発火");
})
```

これでサーバーを立ち上げると
![20210416-154858.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/0b08ee13-f0e7-1885-b6d5-4a77595cf286.png)

![20210416-154924.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/4787990c-d7b0-8615-933b-cd4829b3808c.png)



問題点１document.getElementByIdはHTMLを一度読み込んでからid取得させるが正解でした
-

```javascript:fee_calculation.js
window.addEventListener('load', () => {
    const priceInput = document.getElementById("item-price");
    priceInput.addEventListener("input", () => {
      console.log("イベント発火");
    })
  });
```

ちゃんとイベント発火しました。

![20210416-162337.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/ec691cc9-9542-c30c-365c-0480f7668225.png)


4.さらに消費税自動入力にけて行きます
-

```javascript:fee_calculation.js
window.addEventListener('load', () => {
     const priceInput = document.getElementById("item-price");
      priceInput.addEventListener("input", () => {
       const inputValue = priceInput.value;
       console.log(inputValue);
    })
  });
```

constはconstを先頭につけて変数を宣言します。

|使い方|
|--|
|const 変数名 = 変数に入れる値;

＊constとは値書き換えを禁止した変数を宣言する方法。
変数・関数共に基本キャメルケース(camelCase)を用いる。ここではinputValue/priceInputがそれ。


5.いい感じに仕上がってます
-

価格に入力すると発火します

![20210416-164623.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/e3a889a0-518c-1623-7b57-068820a64ed0.png)


6.JavaScriptでページ内の特定の位置に文字を出力する
-

iPentec.com さまありがとうございます。

>https://www.ipentec.com/document/javascript-get-tag-element-and-access-element

コード例

```html:html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script type="text/javascript">
        window.onload = function onLoad() {
            target = document.getElementById("output");
            target.innerHTML = "Penguin";
        }
    </script>
    <style>
    <中略>
    </style>
</head>
<body>
    <div class="header-footer">ヘッダです</div>
    <div class="contents" id="output"></div>
    <div class="header-footer">フッタです</div>
</body>
</html>
```

7.結果
-

![20210416-171257.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/47026d29-c11a-1f3d-2ac9-43945f5782c9.png)

```javascript:javascript
target = document.getElementById("output");
```
で

```HTML:html
<div class="contents" id="output"></div>
```

<div></div>の位置を取得します。

次に

```javascript:javascript
target.innerHTML = "Penguin";
```

で先ほどのdivの位置に”Penguin”という文字列を挿入します。


（１）ここから表示場所を特定して表示させます。
const addTaxDom = document.getElementById("販売手数料を表示する場所のid");
addTaxDom.innerHTML = "入力した金額をもとに販売手数料を計算する処理"

（２）計算方法
Math.round(priceInput * 0.1 )


８.でもエラー
-
@haspyokoさんに感謝。全く同じエラーでした。

https://qiita.com/haspyoko/items/744d335f28126c9bd8f8

まずはコンソールでpriceInputの中身から確認

```javascript:javascript
console.log(priceInput)
```

![20210416-175513.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/d7feba24-9a9f-4be4-d8d3-3e6875aab8fd.png)


変数priceInputの中身は

```console
<input class="price-input" id="item-price" placeholder="例）300" type="text" name="item[price]">
```

という文字列でした。


これは掛け算を行っても数値は出ません。

ちなみに
![20210416-180253.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/960935/0acd154e-3c2a-0b22-c387-50582cef553d.png)

###JavascriptでNaNは非数「Not-A-Number」を表す値です。

９.完成
-

あとは変数priceInputの中身を取り出すだけなので　「.value」を後ろにつけるだけ

```javascript:javascript
window.addEventListener('load', () => {
     const priceInput = document.getElementById("item-price");
    //  console.log(priceInput)
      priceInput.addEventListener("input", () => {
        const addTaxDom = document.getElementById("add-tax-price");
        // console.log(priceInput.innerHTML);
        addTaxDom.innerHTML = Math.round(priceInput.value * 0.1 );
        const addPofitDom = document.getElementById("profit");
        // console.log(priceInput.innerHTML);
        addPofitDom.innerHTML = Math.round(priceInput.value - Math.round(priceInput.value * 0.1 ))
    })
  });
```

完成です
長い間お付き合いいただきありがとうございます。