JSでの単価×時間(差)の計算について

Question

Javascript初心者です。
現在、添付画像ののような、単価×時間(終了時間×開始時間)で請求するものを作成しています。
見よう見まねでJavascriptのコードを書いているのですが、請求合計の部分に計算結果が何も表示されません。
(単純に単価だけを請求合計にする場合には結果が表示されるので時間差の部分や掛け算などに問題があるのではと思っております）。

お分かりの方がいらっしゃいましたら、宜しくお願い致します。

![]

$(document).on('blur', '[name^="price"]', function(e) {

	var milTotal = 0;
	var ending_time ='[name^="ending_time"]';
	var starting_time ='[name^="starting_time"]';
        var dif = ('ending_time' - 'stating_time') / 60;

	$('[name^="price"]').each(function() {
		milTotal += Number($(this).val()) * 'dif';
	});

	$('[data-ele="milTotal"]').html(milTotal);
});

<div class="modal-body bid-modal-body">
				<form id="milForm">
					<div class="clearfix"></div>
					<div class="milestones-form">
						<div class="form-group">
							<label>単価 / 15分</label>
							<input type="number" class="form-control" placeholder="15分あたりの単価を入力してください。"
							name="price[]"
							data-validation="required number">
			
						</div>
						<div class="form-group">
							<label>セッションの開始時間</label>
								<input type="datetime-local" class="form-control" placeholder="セッションの終了時間"
								name="starting_time[]">
							</input>
						</div>

						<div class="form-group">
							<label>セッションの終了時間</label>					<input type="datetime-local" class="form-control" placeholder="セッションの終了時間"
						name="ending_time[]">
						</div>
						<div class="form-group">
							<label>備考</label>
							<textarea class="form-control" rows="2"
							name="description[]"></textarea>
						</div>
					</div>

					<div class="clearfix"></div>
					<div class="center-block bottom-part">
						<a href="#" data-ele="addMillass="fa fa-plus-square-o"></i> 請求を追加する</a>
						<h3>請求合計
						<span>
							<span data-ele="milTotal">0.00</span>
							
						</span></h3>
					</div>

Answer 1

'で囲まれたものは文字列です。
なので、'ending_time' - 'stating_time'は「ending_timeという文字列からstating_timeという文字列を引く」という意味になります。

javascriptの変数についてご理解を深めるのがよろしいかと思います。
参考：文法とデータ型 - JavaScript | MDN

↑が直ったということなので次に

var ending_time ='[name^="ending_time"]';ですが、これも文字列の代入をしているに過ぎません。フォームの値をとるには、たとえばjQueryの.val()メソッドを使う必要があります。
参考：.val() | jQuery API Documentation



この他にも、いろいろおかしな点があり、全部直すと結構長くかかりそうですけど、大丈夫そうですか？

コメントを受けて追記

$(price)は間違っています。
というのも、jQueryオブジェクトを作る基本構文の$()には、（細かいことを省くと）このような決まりがあるからです。
$(セレクタ)
このセレクタは文字列である必要があります。なので、$(price)とするのであれば、変数priceに文字列が入っていなければならないはずですが、実際には何も入っていないと思われます。

同様に、

var starting_time = $(starting_time).val();

も間違っています。
これは、おそらくこう書くのが正解です。

var starting_time =$('[name^="starting_time"]').val();

　
参考：jQuery入門講座 使い方-オブジェクトについて

Comments

[rumi]

こちらコメントがありがとうございます。
文字列の部分を修正いたしましたが、まだ結果表示できていないので、
いただいたリンクなどより勉強して引き続き検証したいと思います。

[rumi]

いただいたリンクなどを踏まえ、以下に直してみましたが、動かないですね。勉強不足ですね。

$("input").on('blur',function(e) {

var milTotal = 0;
var price = $(price).val();
var starting_time = $(starting_time).val();
var ending_time = $(ending_time).val();
var dif = function(){$(ending_time - stating_time).val();}

$("input").each(function() {
milTotal = dif*price;
});

$('[data-ele="milTotal"]').html(milTotal);
});

[Lhankor_Mhy]

そうですね、いろいろ間違っていますね。
後で回答に追記します。

[rumi]

こちらコメントありがとうございます。なんか最初に私が記載したものに戻っていますね。
もう少し考えてみます。