Q&A
> javascriptの部分は全行書いていただけれ
だと質問ではなく作業依頼になっています。
何を理解していて何を理解していないのかを明確に記載してください。
（ただ、理解していない部分が大きすぎると回答しても理解得られない可能性があり、お互い浪費することになって「質問と回答」の域を超える）
いずれにしても「うまくいかない」では起きてる現象は伝わらないので、
具体的に起きていること（エラーなど含め）を記載されたほうが良いです。
<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をイベントごとに分けて、記述いたしました。
ところが、この方法でやると１つ目はうまく挙動しましたが、
２つ目は挙動がうまく動かなかったです。
１つのボタンで複数の運賃計算を同時処理する場合、
そもそもfunctionは分けたほうがいいのか、
それとも、少し記述ミスがあり、
テコ入れをするだけでいいのかがわかりません。
なお、htmlの部分は書かなくても差し支えはありませんが、
いかんせん、初歩的な知識しか持ち合わせていないので、
javascriptの部分は全行書いていただければありがたいです。
ちなみにうまく挙動しないというのは、ボタンをクリックすると1つ目は運賃結果が表示されるのに、２つ目はそれが出ないという意味です。
個々の質問者さんは六に質問してくれない最低以下の集団ですね。😡。
なんの話なのかわからないし、そのコメントがなんの解決にもなってない
回答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_2 が document.getElementById に渡されているため、document.getElementById が null を返し、value の取得で例外が発生して処理が止まっている可能性があります。
これらのIDを持つ要素を用意するか、document.getElementById に渡すIDを存在する要素のID (たとえば semboku_futsu_kodomo_2 や osakametro_futsu_kodomo_2) に変更するといいかもしれません。
投稿2023/04/07 10:24
総合スコア7
単純な記述ミスだったわけですね。
<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の部分を一致させないと、挙動がうまくいかなかったのですね。
初歩的なミスでした。すみません。
あなたの回答
tips
プレビュー
