furimaアプリの実装中です。
Javascriptの手数料計算自動化の実装中です。
Javascriptファイルを作る
①-1:furimaApp/app/javascript/packs内にファイルを置きます。
①-2:application.jsファイル内に記述呼び出しの記述をします
| 書き方 |
|---|
| const 変数 = require( モジュール名 ); |
①−３ブラウザ上いったんファイル呼び出し確認を行います
（注意）railsファイルがきちんとかけていて呼び出せる（綺麗に表示できていること）が前提です。
window.addEventListener('load', () => {
console.log("OK");
});
①−４ブラウザを開いたら「command＋option+j」
consoleタブでOKとファイル名があれば表示確認OKです。
①販売価格を Viewファイルから取得する
@amamamaouさんありがとうございます。参考になります。
| 目的 | メソッド | 返り値 |
|---|---|---|
| 要素が取得 | document ．getElementById（ ” id 名 ” ）； | HTMLElement / null |
参照：UX MILKさん 「JavaScriptでidから要素を取得する方法：getElementById()」
体重を入力して下さい:<input type="text" id="id01"><br/>
身長をメートルで入力して下さい:<input type="text" id="id02"><br/>
<input type="button" value="計算" onclick="calcBmi();">
//入力された体重と身長から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さん参考にさせていただきました。
addEventListenerの書き方
オブジェクト(対象の要素).addEventListener('イベント名',function(){処理内容},false)
イベントとはトリガー（拳銃の引き金）のことでいつ発生させるのかのきっかけ【タイミング】のことです。
参考
| イベント種類 | 内容 |
|---|---|
| load | Webページの読み込みが完了した時に発動（画像などのリソースすべて含む） |
| click | マウスボタンをクリックした時に発動 |
| mousedown | マウスボタンを押している時に発動 |
| mouseup | マウスボタンを離したときに発動 |
| mousemove | マウスカーソルが移動した時に発動 |
| keydown | キーボードのキーを押したときに発動 |
| keyup | キーボードのキーを離したときに発動 |
| keypress | キーボードのキーを押している時に発動 |
| submmit | フォームのsubmitボタンを押したときに発動 |
| scroll | 画面 |
①＋②(これはエラーになります)
const priceInput = document.getElementById("金額を入力する場所のid");
priceInput.addEventListener("input", () => {
console.log("イベント発火");
})
これでサーバーを立ち上げると
問題点１document.getElementByIdはHTMLを一度読み込んでからid取得させるが正解でした
window.addEventListener('load', () => {
const priceInput = document.getElementById("item-price");
priceInput.addEventListener("input", () => {
console.log("イベント発火");
})
});
ちゃんとイベント発火しました。
4.さらに消費税自動入力にけて行きます
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.いい感じに仕上がってます
価格に入力すると発火します
6.JavaScriptでページ内の特定の位置に文字を出力する
iPentec.com さまありがとうございます。
https://www.ipentec.com/document/javascript-get-tag-element-and-access-element
コード例
<!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.結果
target = document.getElementById("output");
で
<div class="contents" id="output"></div>
次に
target.innerHTML = "Penguin";
で先ほどのdivの位置に”Penguin”という文字列を挿入します。
（１）ここから表示場所を特定して表示させます。
const addTaxDom = document.getElementById("販売手数料を表示する場所のid");
addTaxDom.innerHTML = "入力した金額をもとに販売手数料を計算する処理"
（２）計算方法
Math.round(priceInput * 0.1 )
８.でもエラー
@haspyokoさんに感謝。全く同じエラーでした。
まずはコンソールでpriceInputの中身から確認
console.log(priceInput)
変数priceInputの中身は
<input class="price-input" id="item-price" placeholder="例）300" type="text" name="item[price]">
という文字列でした。
これは掛け算を行っても数値は出ません。
ちなみに
JavascriptでNaNは非数「Not-A-Number」を表す値です。
９.完成
あとは変数priceInputの中身を取り出すだけなので 「.value」を後ろにつけるだけ
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 ))
})
});
完成です
長い間お付き合いいただきありがとうございます。