質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.52%

  • JavaScript

    16415questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

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

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 300

rumi

score 6

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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+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入門講座 使い方-オブジェクトについて

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/26 13:54

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

    キャンセル

  • 2017/10/27 12:22 編集

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

    $("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);
    });

    キャンセル

  • 2017/10/27 13:12

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

    キャンセル

  • 2017/10/27 21:37

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.52%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16415questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。