<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つ目はそれが出ないという意味です。
回答2件
あなたの回答
tips
プレビュー