Q&A
質問の論旨から逸れますので回答ではなくここに書きますが、コード中の全角スペースは半角スペースに修正する必要があります。<input type="text" id="name"など、数箇所あります。
自動計算機能をJsで追加したい。
初心者です。
HTMLとCSSの部分の作成はできたのですが、
別ファイルでJSを追加して、宿泊人数を入力したら1人5000円として自動計算で合計金額のところに金額が出るようにしたいです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF8"> 5 <title>宿泊予約</title> 6 <!-- メニュー詳細用のcssファイル読み込み --> 7 <link rel="stylesheet" type="text/css" href="complete.css"> 8 </head> 9 <body> 10 <div class="font1"> 11 <div> 12 <a href="./chart.html">????浦島観光ホテル</a> 13 </div> 14 <h1>宿泊予約</h1> 15 <h2>素泊まりプラン</h2> 16 <p>プランの説明ですプランの説明ですプランの説明です素泊まりプランの説明です</p> 17 <p>予約フォーム</p> 18 <form action="" method="post"> 19 <div class="form-row"> 20 <div class="tab1"> 21 <label for="name">氏名*<br> 22 <!-- required="required"またはrequiredをつけると必須入力項目指定になって入力していないとエラーを返すようだ --> 23 <input type="text" id="name" style="width: 300px; height: 30px;" placeholder="予約 太郎" required ></label> 24 </div> 25 <div class="tab2"> 26 <label for="syukuhaku">宿泊人数*<br> 27 <input type="number" style="width: 100px; height: 30px;" min="0" placeholder="人数" required></label> 28 </div> 29 <div> 30 <label for="number">合計金額<br> 31 <input type="number" style="width: 100px; height: 30px;" placeholder="0"></label> 32 </div> 33 </div> 34 <div class="form-row"> 35 <div class="tab3"> 36 <label for="email">メールアドレス*<br> 37 <input type="email" id="email" style="width: 300px; height: 30px;" placeholder="teberst@mailbox.com" required ></label> 38 </div> 39 <div> 40 <label for="tel">電話番号*<br> 41 <input type="tel" id="tel" style="width: 300px; height: 30px;" placeholder="090XXXXXXXX" required ></label> 42 </div> 43 </div> 44 <div class="spase"> 45 <label for="number">到着予定時刻<br> 46 <input type="number" id="tel" style="width: 200px; height: 30px;"></label> 47 <div class="spase"> 48 <label for="message">備考<br> 49 <textarea id="message" placeholder="チェックアウトの時間を遅らせたい"></textarea></label> 50 </div> 51 </div> 52 </form> 53 <table><tr> 54 <form action="Confirmation.html"> 55 <input class="submit" type="submit" value="確認"></form> 56 <form action="chart.html"> 57 <input class="botton" type="submit" value="戻る"></form> 58 </table> 59 </div> 60 </body> 61</html>
CSS
1textarea{ 2 width : 100%; 3 height: 4em; 4} 5.form-row{ 6 display : flex; 7 padding-top : 20px 8} 9.tab1{ 10 margin-right : 20px; 11} 12.tab2{ 13 margin-right : 20px; 14} 15.tab3{ 16 margin-right : 20px; 17} 18.spase{ 19 padding-top : 20px 20} 21.submit{ 22 border-radius : 15%; /* 角丸 */ 23 width : 70px; 24 height: 40px; 25 background : #4da6ff; /* 背景色 */ 26 color : #ffffff; /* 文字色 */ 27 border : solid 0px; 28} 29.botton{ 30 border-radius : 20%; /* 角丸 */ 31 width : 70px; 32 height: 40px; 33 background : #fff; 34 border-color: #000; 35 border-width : 1px; 36 float : right; 37} 38.form_conf { 39 text-align : center; 40 display : inline-block; 41}
ありがとうございます！修正しておきます！
回答2件
0
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF8"> 5 <title>宿泊予約</title> 6 <!-- 全画面共通のcssファイル読み込み --> 7 <link rel="stylesheet" type="text/css" href="odai.css/common.css"> 8 <!-- メニュー詳細用のcssファイル読み込み --> 9 <link rel="stylesheet" type="text/css" href="odai.css/complete.css"> 10 <script type="text/javascript"> 11 function keisan(){ //関数宣言 12 var hoge = document.getElementById('a_1').value; //テキストエリアの値を取得 13 var hoge1 = parseInt(hoge);//文字列を整数に変換する 14 var price1 = hoge1 * 5000; //金額を人数にかける 15 document.getElementById('total').value = price1; 16 return; 17 } 18 </script> 19 </head> 20 <body> 21 <div> 22 <!-- 任意のページに画面遷移するやり方で一番オーソドックスな方法 --> 23 <a href="./chart.html">????浦島観光ホテル</a> 24 </div> 25 <h1>宿泊予約</h1> 26 <h2>素泊まりプラン</h2> 27 <p>プランの説明ですプランの説明ですプランの説明です素泊まりプランの説明です</p> 28 <p>予約フォーム</p> 29 <form action="" method="post" name="form1"> 30 <div class="form-row"> 31 <div class="tab1"> 32 <label for="name">氏名*<br> 33 <!-- required="required"またはrequiredをつけると必須入力項目指定になって入力していないとエラーを返すようだ --> 34 <input type="text" id="name" style="width: 300px; height: 30px;" placeholder="予約 太郎" required ></label> 35 </div> 36 <div class="tab2"> 37 <label for="syukuhaku">宿泊人数*<br> 38 <input type="text" id="a_1" value="" name="a_1" style="width: 120px; height: 30px;" min="0" placeholder="人数" onChange="keisan()" required></label> 39 </div> 40 <div> 41 合計金額<br><span id="total"> 42 <input type="text" id="total" value='' name="total" style="width: 100px; height: 30px;" placeholder="0" readonly></span> 43 </div> 44 </div> 45 <div class="form-row"> 46 <div class="tab3"> 47 <label for="email">メールアドレス*<br> 48 <input type="email" id="email" style="width: 300px; height: 30px;" placeholder="teberst@mailbox.com" required ></label> 49 </div> 50 <div> 51 <label for="tel">電話番号*<br> 52 <input type="tel" id="tel" style="width: 250px; height: 30px;" placeholder="090XXXXXXXX" required ></label> 53 </div> 54 </div> 55 <div class="spase"> 56 <label for="time">到着予定時刻<br> 57 <input type="time" id="tel" style="width: 200px; height: 30px;"></label> 58 <div class="spase"> 59 <label for="message">備考<br> 60 <textarea id="message" placeholder="チェックアウトの時間を遅らせたい"></textarea></label> 61 </div> 62 </div> 63 </form> 64 <table><tr> 65 <form action="confirmation.html"> 66 <input class="submit" type="submit" value="確認"></form> 67 <form action="chart.html"> 68 <input class="botton" type="submit" value="戻る"></form> 69 </table> 70 </body> 71</html>
投稿2020/07/16 07:34
退会済みユーザー
総合スコア0
コードを見させていただきました。
問題ないと思いますよ。
欲を言えば
・5000という値の定数化
・hogeはもっと具体的な変数名にする(練習用のコードなのかもしれませんが)
・不要なreturnの削除
辺りだと思いますよ。
もしくはもっと柔軟性を出すために、5000という数値と設定したいid(ここで言うtotalですね)を引数で渡すようにするのもいいですね。
そうする事で、整数の乗算を行う関数として他で掛け算をしたい時に使用できます。
勉強になります。確認していただきありがとうございました！
0
ベストアンサー
答えを言うとあれなので、手順を
・宿泊人数のonchangeイベントに計算関数を設定(この時に入力値を関数に渡す)
・計算関数内で算出して、合計金額に表示
合計金額算出時はgetElementByIdなどを使用するとよいかと思います。
(idを記述しておかないといけません。)
投稿2020/07/15 06:20
退会済みユーザー
総合スコア0
ありがとうございます！
宿泊人数のinput要素にid="test_a"とonChange="keisan()"を追加しました。
JSの記述部分がまだいろいろと試して確認している途中ですが、頑張ってみます！
修正しました。解決できたのでこーどを一様載せておきます。
あなたの回答
tips
プレビュー
