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

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

ただいまの
回答率

88.92%

自動計算機能をJsで追加したい。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 182
退会済みユーザー

退会済みユーザー

自動計算機能をJsで追加したい。

初心者です。
HTMLとCSSの部分の作成はできたのですが、
別ファイルでJSを追加して、宿泊人数を入力したら1人5000円として自動計算で合計金額のところに金額が出るようにしたいです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF8">
        <title>宿泊予約</title>
        <!-- メニュー詳細用のcssファイル読み込み -->
        <link rel="stylesheet" type="text/css" href="complete.css">
    </head>
    <body>
        <div class="font1">
            <div>
                <a href="./chart.html">📖浦島観光ホテル</a>
            </div>
            <h1>宿泊予約</h1>
            <h2>素泊まりプラン</h2>
            <p>プランの説明ですプランの説明ですプランの説明です素泊まりプランの説明です</p>
            <p>予約フォーム</p>
            <form action="" method="post">
                <div class="form-row">
                    <div class="tab1">
                        <label for="name">氏名*<br>
                            <!-- required="required"またはrequiredをつけると必須入力項目指定になって入力していないとエラーを返すようだ -->
                            <input type="text" id="name" style="width: 300px; height: 30px;"  placeholder="予約 太郎" required ></label>
                    </div>
                    <div class="tab2">
                        <label for="syukuhaku">宿泊人数*<br>
                            <input type="number" style="width: 100px; height: 30px;" min="0" placeholder="人数" required></label>
                    </div>
                    <div>
                        <label for="number">合計金額<br>
                            <input type="number"  style="width: 100px; height: 30px;" placeholder="0"></label>
                    </div>
                </div>
                <div class="form-row">
                    <div class="tab3">
                        <label for="email">メールアドレス*<br>
                            <input type="email" id="email" style="width: 300px; height: 30px;" placeholder="teberst@mailbox.com" required ></label>
                    </div>
                    <div>
                        <label for="tel">電話番号*<br>
                            <input type="tel" id="tel" style="width: 300px; height: 30px;" placeholder="090XXXXXXXX" required ></label>
                    </div>
                </div>
                <div class="spase">
                    <label for="number">到着予定時刻<br>
                        <input type="number" id="tel" style="width: 200px; height: 30px;"></label>
                    <div class="spase">
                        <label for="message">備考<br>
                            <textarea id="message" placeholder="チェックアウトの時間を遅らせたい"></textarea></label>
                    </div>
                </div>
            </form>
            <table><tr>
                <form  action="Confirmation.html">
                    <input class="submit" type="submit" value="確認"></form>
                <form   action="chart.html">
                    <input class="botton" type="submit" value="戻る"></form>
            </table>
        </div>
    </body>
</html> 
textarea{
    width : 100%;
    height: 4em;
}
.form-row{
    display : flex;
    padding-top : 20px
}
.tab1{
    margin-right : 20px;
}
.tab2{
    margin-right : 20px;
}
.tab3{
    margin-right : 20px;
}
.spase{
    padding-top : 20px
}
.submit{
    border-radius : 15%;      /* 角丸       */
    width : 70px;
    height: 40px;
    background : #4da6ff;     /* 背景色     */
    color      : #ffffff;     /* 文字色     */
    border : solid 0px;
}
.botton{
    border-radius : 20%;      /* 角丸       */
    width : 70px;
    height: 40px;
    background  : #fff;
    border-color: #000;
    border-width : 1px;
    float : right; 
}
.form_conf {
    text-align : center;
    display : inline-block;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • thyda.eiqau

    2020/07/15 15:50

    質問の論旨から逸れますので回答ではなくここに書きますが、コード中の全角スペースは半角スペースに修正する必要があります。<input type="text" id="name"など、数箇所あります。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2020/07/15 17:42

    ありがとうございます!修正しておきます!

    キャンセル

回答 2

checkベストアンサー

0

答えを言うとあれなので、手順を

・宿泊人数のonchangeイベントに計算関数を設定(この時に入力値を関数に渡す)
・計算関数内で算出して、合計金額に表示

合計金額算出時はgetElementByIdなどを使用するとよいかと思います。
(idを記述しておかないといけません。)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/15 18:03

    ありがとうございます!
    宿泊人数のinput要素にid="test_a"とonChange="keisan()"を追加しました。
    JSの記述部分がまだいろいろと試して確認している途中ですが、頑張ってみます!

    キャンセル

  • 2020/07/16 11:22 編集

    修正しました。解決できたのでこーどを一様載せておきます。

    キャンセル

0

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF8">
        <title>宿泊予約</title>
        <!-- 全画面共通のcssファイル読み込み -->
        <link rel="stylesheet" type="text/css" href="odai.css/common.css">
        <!-- メニュー詳細用のcssファイル読み込み -->
        <link rel="stylesheet" type="text/css" href="odai.css/complete.css">
        <script type="text/javascript">
            function keisan(){    //関数宣言
            var hoge = document.getElementById('a_1').value;  //テキストエリアの値を取得
            var hoge1 = parseInt(hoge);//文字列を整数に変換する
            var price1 = hoge1 * 5000; //金額を人数にかける
            document.getElementById('total').value = price1;
            return;
            }
            </script>
    </head>
    <body>
        <div>
            <!-- 任意のページに画面遷移するやり方で一番オーソドックスな方法 -->
            <a href="./chart.html">📖浦島観光ホテル</a>
        </div>
        <h1>宿泊予約</h1>
        <h2>素泊まりプラン</h2>
        <p>プランの説明ですプランの説明ですプランの説明です素泊まりプランの説明です</p>
        <p>予約フォーム</p>
        <form action="" method="post" name="form1">
            <div class="form-row">
                <div class="tab1">
                    <label for="name">氏名*<br>
                        <!-- required="required"またはrequiredをつけると必須入力項目指定になって入力していないとエラーを返すようだ -->
                        <input type="text" id="name" style="width: 300px; height: 30px;"  placeholder="予約 太郎" required ></label>
                </div>
                <div class="tab2">
                    <label for="syukuhaku">宿泊人数*<br>
                        <input type="text" id="a_1" value="" name="a_1" style="width: 120px; height: 30px;" min="0" placeholder="人数" onChange="keisan()"  required></label>
                </div>
                <div>
                    合計金額<br><span id="total">
                        <input type="text" id="total" value='' name="total" style="width: 100px; height: 30px;" placeholder="0" readonly></span>
                </div>
            </div>
            <div class="form-row">
                <div class="tab3">
                    <label for="email">メールアドレス*<br>
                        <input type="email" id="email" style="width: 300px; height: 30px;" placeholder="teberst@mailbox.com" required ></label>
                </div>
                <div>
                    <label for="tel">電話番号*<br>
                        <input type="tel" id="tel" style="width: 250px; height: 30px;" placeholder="090XXXXXXXX" required ></label>
                </div>
            </div>
            <div class="spase">
                <label for="time">到着予定時刻<br>
                    <input type="time" id="tel" style="width: 200px; height: 30px;"></label>
                <div class="spase">
                    <label for="message">備考<br>
                        <textarea id="message" placeholder="チェックアウトの時間を遅らせたい"></textarea></label>
                </div>
            </div>
        </form>
        <table><tr>
            <form  action="confirmation.html">
                <input class="submit" type="submit" value="確認"></form>
            <form   action="chart.html">
                <input class="botton" type="submit" value="戻る"></form>
        </table>
    </body>
</html> 

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/07/16 21:01 編集

    コードを見させていただきました。
    問題ないと思いますよ。

    欲を言えば
    ・5000という値の定数化
    ・hogeはもっと具体的な変数名にする(練習用のコードなのかもしれませんが)
    ・不要なreturnの削除

    辺りだと思いますよ。

    もしくはもっと柔軟性を出すために、5000という数値と設定したいid(ここで言うtotalですね)を引数で渡すようにするのもいいですね。

    そうする事で、整数の乗算を行う関数として他で掛け算をしたい時に使用できます。

    キャンセル

  • 2020/07/17 15:08

    勉強になります。確認していただきありがとうございました!

    キャンセル

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

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

関連した質問

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