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

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

新規登録して質問してみよう
ただいま回答率
85.45%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

1269閲覧

電車の運賃検索、ボタン一つで、普通大人運賃、普通小児運賃といった、複数の項目の計算を同時処理したいです。

eppy0422

総合スコア1

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2023/03/27 11:44

編集2023/03/27 23:24
<script src="泉北 20220801 Mon\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script> <script src="大阪メトロ 20220803 Wed\jsファイル 20220801 Mon\運賃 20220801 Mon.js"></script> <style> textarea.hoge { width: 150px; height:200px;} </style> <body> <form name="semboku_f"> 出発駅は <select name="semboku_q1"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> <option>栂・美木多</option> <option>光明池</option> <option>和泉中央</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。 <p> 到着駅は <select name="semboku_q2"> <option>選択肢</option> <option>中百舌鳥</option> <option>深井</option> <option>泉ケ丘</option> <option>栂・美木多</option> <option>光明池</option> <option>和泉中央</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> <input type="button" name="b1" value="運賃検索" onclick="semboku_kotae()"> <p></input> <table border="1"> <tr><th>距離</th><th> <input name=semboku_tokuten size="6">km</input></th></tr> <tr><th>普通大人</th><th><input name=semboku_futsu_otona id="semboku_futsu_otona_2">円</input></th></tr> <tr><th>普通小児</th><th><input name=semboku_futsu_shoni id="semboku_futsu_kodomo_2">円</input></th></tr> <tr><th>通勤定期大人1か月</th><th><input name=semboku_tsukin_teiki_otona_1 id="semboku_tsukin_teiki_otona_1_2">円</input></th></tr> <tr><th>通勤定期小児1か月</th><th><input name=semboku_tsukin_teiki_shoni_1 id="semboku_tsukin_teiki_shoni_1_2">円</input></th></tr> <tr><th>通勤定期大人3か月</th><th><input name=semboku_tsukin_teiki_otona_3 id="semboku_tsukin_teiki_otona_3_2">円</input></th></tr> <tr><th>通勤定期小児3か月</th><th><input name=semboku_tsukin_teiki_shoni_3 id="semboku_tsukin_teiki_shoni_3_2">円</input></th></tr> <tr><th>通勤定期大人6か月</th><th><input name=semboku_tsukin_teiki_otona_6 id="semboku_tsukin_teiki_otona_6_2">円</input></th></tr> <tr><th>通勤定期小児6か月</th><th><input name=semboku_tsukin_teiki_shoni_6 id="semboku_tsukin_teiki_shoni_6_2">円</input></th></tr> <tr><th>通学定期大人1か月</th><th><input name=semboku_tsugaku_teiki_otona_1 id="semboku_tsugaku_teiki_otona_1_2">円</input></th></tr> <tr><th>通学定期小児1か月</th><th><input name=semboku_tsugaku_teiki_shoni_1 id="semboku_tsugaku_teiki_shoni_1_2">円</input></th></tr> <tr><th>通学定期大人3か月</th><th><input name=semboku_tsugaku_teiki_otona_3 id="semboku_tsugaku_teiki_otona_3_2">円</input></th></tr> <tr><th>通学定期小児3か月</th><th><input name=semboku_tsugaku_teiki_shoni_3 id="semboku_tsugaku_teiki_shoni_3_2">円</input></th></tr> <tr><th>通学定期大人6か月</th><th><input name=semboku_tsugaku_teiki_otona_6 id="semboku_tsugaku_teiki_otona_6_2">円</input></th></tr> <tr><th>通学定期小児6か月</th><th><input name=semboku_tsugaku_teiki_shoni_6 id="semboku_tsugaku_teiki_shoni_6_2">円</input></th></tr> </table> </form> <!--HTMLここまで--> <!--問題--> <br> <hr> <br> <!--阪和線--> <body> <form name="osakametro_f"> 出発駅は <select name="osakametro_q1"> <option>選択肢</option> <option>江坂</option> <option>梅田</option> <option>なんば</option> <option>天王寺</option> <option>なかもず</option> <option>深井</option> <option>泉ケ丘</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。 <p> 到着駅は <select name="osakametro_q2"> <option>選択肢</option> <option>江坂</option> <option>梅田</option> <option>なんば</option> <option>天王寺</option> <option>なかもず</option> <option>深井</option> <option>泉ケ丘</option> <option>名古屋市</option> <option>松山市</option> <option>金沢市</option> <option>高松市</option> </select> です。<p> <input type="button" name="b2" value="運賃検索" onclick="osakametro_kotae()"> <p></input> <table border="1"> <tr><th>距離</th><th> <input name=osakametro_tokuten size="6">km</input></th></tr> <tr><th>普通大人</th><th><input name=osakametro_futsu_otona id="osakametro_futsu_otona_2">円</input></th></tr> <tr><th>普通小児</th><th><input name=osakametro_futsu_shoni id="osakametro_futsu_kodomo_2">円</input></th></tr> <tr><th>通勤定期大人1か月</th><th><input name=osakametro_tsukin_teiki_otona_1 id="osakametro_tsukin_teiki_otona_1_2">円</input></th></tr> <tr><th>通勤定期小児1か月</th><th><input name=osakametro_tsukin_teiki_shoni_1 id="osakametro_tsukin_teiki_shoni_1_2">円</input></th></tr> <tr><th>通勤定期大人3か月</th><th><input name=osakametro_tsukin_teiki_otona_3 id="osakametro_tsukin_teiki_otona_3_2">円</input></th></tr> <tr><th>通勤定期小児3か月</th><th><input name=osakametro_tsukin_teiki_shoni_3 id="osakametro_tsukin_teiki_shoni_3_2">円</input></th></tr> <tr><th>通勤定期大人6か月</th><th><input name=osakametro_tsukin_teiki_otona_6 id="osakametro_tsukin_teiki_otona_6_2">円</input></th></tr> <tr><th>通勤定期小児6か月</th><th><input name=osakametro_tsukin_teiki_shoni_6 id="osakametro_tsukin_teiki_shoni_6_2">円</input></th></tr> <tr><th>通学定期大人1か月</th><th><input name=osakametro_tsugaku_teiki_otona_1 id="osakametro_tsugaku_teiki_otona_1_2">円</input></th></tr> <tr><th>通学定期小児1か月</th><th><input name=osakametro_tsugaku_teiki_shoni_1 id="osakametro_tsugaku_teiki_shoni_1_2">円</input></th></tr> <tr><th>通学定期大人3か月</th><th><input name=osakametro_tsugaku_teiki_otona_3 id="osakametro_tsugaku_teiki_otona_3_2">円</input></th></tr> <tr><th>通学定期小児3か月</th><th><input name=osakametro_tsugaku_teiki_shoni_3 id="osakametro_tsugaku_teiki_shoni_3_2">円</input></th></tr> <tr><th>通学定期大人6か月</th><th><input name=osakametro_tsugaku_teiki_otona_6 id="osakametro_tsugaku_teiki_otona_6_2">円</input></th></tr> <tr><th>通学定期小児6か月</th><th><input name=osakametro_tsugaku_teiki_shoni_6 id="osakametro_tsugaku_teiki_shoni_6_2">円</input></th></tr> </table> <!--HTMLここまで--> <!--問題--> <hr /> <hr /> <hr /> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>フォームに入力された数値の取得</title> </head> <body> <form> <button id="button">足す</button> </form> <table border="1"> <tr><th><label for="futsus_otona">普通大人: </label></th><th><input type="text" id="futsu_otona"></th></tr> <tr><th><label for="futsus_shoni">普通子供: </label></th><th><input type="text" id="futsu_shoni"></th></tr> <table> </body> <script> // ボタンの要素を取得 var button = document.getElementById("button"); // ボタンをクリックした時の処理 button.addEventListener("click", function(e) { e.preventDefault(); // 2つの入力フォームの値を取得 var semboku_futsu_otona_2 = document.getElementById("semboku_futsu_otona_2").value; var osakametro_futsu_otona_2 = document.getElementById("osakametro_futsu_otona_2").value; // 2つの数値を足す var sum = parseInt(semboku_futsu_otona_2, 10) + parseInt(osakametro_futsu_otona_2, 10); // 足し算の結果を別の入力フォームに表示 var futsu_otona = document.getElementById("futsu_otona"); futsu_otona.value = sum; // 2つの入力フォームの値を取得 var semboku_futsu_shoni_2 = document.getElementById("semboku_futsu_shoni_2").value; var osakametro_futsu_shoni_2 = document.getElementById("osakametro_futsu_shoni_2").value; // 2つの数値を足す var sum = parseInt(semboku_futsu_shoni_2, 10) + parseInt(osakametro_futsu_shoni_2, 10); // 足し算の結果を別の入力フォームに表示 var futsu_shoni = document.getElementById("futsu_shoni"); futsu_shoni.value = sum; }); </script> </html>

(https://ddjkaamml8q8x.cloudfront.net/questions/2023-03-27/4035901f-c37d-4850-8253-a2aaced7cfc7.png)
上は、電車の運賃検索プログラムを書いています。
自分が試したのは、
var buttonの行から、vur sumの行を一つにして、
イベントの部分を var futsu_otonaと、var futsu_shoniをイベントごとに分けて、記述いたしました。
ところが、この方法でやると1つ目はうまく挙動しましたが、
2つ目は挙動がうまく動かなかったです。
1つのボタンで複数の運賃計算を同時処理する場合、
そもそもfunctionは分けたほうがいいのか、
それとも、少し記述ミスがあり、
テコ入れをするだけでいいのかがわかりません。
なお、htmlの部分は書かなくても差し支えはありませんが、
いかんせん、初歩的な知識しか持ち合わせていないので、
javascriptの部分は全行書いていただければありがたいです。
ちなみにうまく挙動しないというのは、ボタンをクリックすると1つ目は運賃結果が表示されるのに、2つ目はそれが出ないという意味です。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2023/03/27 23:03

> javascriptの部分は全行書いていただけれ だと質問ではなく作業依頼になっています。 何を理解していて何を理解していないのかを明確に記載してください。 (ただ、理解していない部分が大きすぎると回答しても理解得られない可能性があり、お互い浪費することになって「質問と回答」の域を超える) いずれにしても「うまくいかない」では起きてる現象は伝わらないので、 具体的に起きていること(エラーなど含め)を記載されたほうが良いです。
eppy0422

2023/03/28 02:51

個々の質問者さんは六に質問してくれない最低以下の集団ですね。😡。
m.ts10806

2023/03/28 03:29 編集

なんの話なのかわからないし、そのコメントがなんの解決にもなってない
guest

回答2

0

ベストアンサー

var semboku_futsu_shoni_2 = document.getElementById("semboku_futsu_shoni_2").value; var osakametro_futsu_shoni_2 = document.getElementById("osakametro_futsu_shoni_2").value;

この部分で、(少なくとも投稿された部分には) 存在しないIDの semboku_futsu_shoni_2 および osakametro_futsu_shoni_2document.getElementById に渡されているため、document.getElementByIdnull を返し、value の取得で例外が発生して処理が止まっている可能性があります。
これらのIDを持つ要素を用意するか、document.getElementById に渡すIDを存在する要素のID (たとえば semboku_futsu_kodomo_2osakametro_futsu_kodomo_2) に変更するといいかもしれません。

投稿2023/04/07 10:24

mikecat

総合スコア7

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eppy0422

2023/04/28 22:38

単純な記述ミスだったわけですね。 <tr><th>普通小児</th><th><input name=semboku_futsu_shoni id="semboku_futsu_kodomo_2">円</input></th></tr>のボタンのidの部分と、 var semboku_futsu_shoni_2 = document.getElementById("semboku_futsu_shoni_2").value;の、 varの部分を一致させないと、挙動がうまくいかなかったのですね。 初歩的なミスでした。すみません。
guest

0

個々の質問者さんは六に質問してくれない最低以下の集団ですね。😡。

投稿2023/03/28 03:21

eppy0422

総合スコア1

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

eppy0422

2023/04/06 04:39

これ、ちゃんと試したことって書いてますよ。 自分が試したのは、 var buttonの行から、vur sumの行を一つにして、 イベントの部分を var futsu_otonaと、var futsu_shoniをイベントごとに分けて、記述いたしました。 ところが、この方法でやると1つ目はうまく挙動しましたが、 2つ目は挙動がうまく動かなかったです。 どこがだめで、どのように直したらいいですか。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.45%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問