締切済み

ボタン一つで、複数運賃の計算を一括で計算したいです

2023/04/02 07:20

ボタン一つで、複数運賃の計算を一括で計算したいです。以下は、htmlとjsの文章になります。 <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> </select> です。 <p> 到着駅は <select name="semboku_q2"> <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> </table> </form>   <br> <hr> <br>  <body> <form name="osakametro_f"> 出発駅は <select name="osakametro_q1"> <option>選択肢</option> <option>江坂</option> <option>梅田</option> <option>なんば</option> </select> です。 <p> 到着駅は <select name="osakametro_q2"> <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> <!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"); var button = document.getElementById("button"); button.addEventListener("click", function(e) { e.preventDefault(); var semboku_futsu_otona_2 = document.getElementById("semboku_futsu_otona_2").value; var osakametro_futsu_otona_2 = document.getElementById("osakametro_futsu_otona_2").value; 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; }); </script> を、例えば、普通大人運賃と普通小児運賃の計算をボタン一つで計算する場合、どうしたらいいですか。一つならできました。尚、自分がわかっているのはイベントは一つのhtmlで同時使用できないため、for関数を使用するのと、buttonタブであれば、for (let i = 0; i < buttonElements.length; i++) { buttonElements[i].addEventListener('click', function () {}を使うことです。