他でも出しましたが、明確な回答は得られなかったです。
https://teratail.com/questions/oeums8eqycky7s
以下はそのhtmlコードです。
<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>
到着駅
<select name="semboku_q2">
<option>選択肢</option>
<option>中百舌鳥</option>
<option>深井</option>
<option>泉ケ丘</option>
</select>
<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>
<body>
<form name="osakametro_f">
出発駅
<select name="osakametro_q1">
<option>選択肢</option>
<option>江坂</option>
<option>梅田</option>
<option>なんば</option>
</select>
到着駅
<select name="osakametro_q2">
<option>選択肢</option>
<option>江坂</option>
<option>梅田</option>
<option>なんば</option>
</select>
<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>
</table>
<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>
function semboku_kotae()
{
semboku_ten=0
if((semboku_f.semboku_q1.value == "中百舌鳥"&&semboku_f.semboku_q2.value == "深井")||(semboku_f.semboku_q1.value == "深井"&&semboku_f.semboku_q2.value == "中百舌鳥"))
{semboku_f.semboku_q1.style.backgroundColor="aqua ";semboku_ten = semboku_ten + 3.7}
else if((semboku_f.semboku_q1.value == "中百舌鳥"&&semboku_f.semboku_q2.value == "泉ケ丘")||(semboku_f.semboku_q1.value == "泉ケ丘"&&semboku_f.semboku_q2.value == "中百舌鳥"))
{semboku_f.semboku_q1.style.backgroundColor="aqua ";semboku_ten = semboku_ten + 7.8}
else semboku_f.semboku_q1.style.backgroundColor="red"
semboku_f.semboku_tokuten.value=semboku_ten
//ここから
//大人
if(semboku_f.semboku_tokuten.value<2){semboku_f.semboku_futsu_otona.value = Number("180")}
else if(semboku_f.semboku_tokuten.value<4)
{semboku_f.semboku_futsu_otona.value = Number("200")}
//ここまで
//子供
if(semboku_f.semboku_tokuten.value<2){semboku_f.semboku_futsu_shoni.value = Number("90")}
else if(semboku_f.semboku_tokuten.value<4)
{semboku_f.semboku_futsu_shoni.value = Number("100")}
}
</script>
<script>
function osakametro_kotae()
{
osakametro_ten=0
if((osakametro_f.osakametro_q1.value == "江坂"&&osakametro_f.osakametro_q2.value == "梅田")||(osakametro_f.osakametro_q1.value == "なんば"&&osakametro_f.osakametro_q2.value == "梅田"))
{osakametro_f.osakametro_q1.style.backgroundColor="aqua ";osakametro_ten = osakametro_ten + 6.4}
else if((osakametro_f.osakametro_q1.value == "江坂"&&osakametro_f.osakametro_q2.value == "梅田")||(osakametro_f.osakametro_q1.value == "なんば"&&osakametro_f.osakametro_q2.value == "梅田"))
{osakametro_f.osakametro_q1.style.backgroundColor="aqua ";osakametro_ten = osakametro_ten + 10.5}
else osakametro_f.osakametro_q1.style.backgroundColor="red"
osakametro_f.osakametro_tokuten.value=osakametro_ten
//ここから
if(osakametro_f.osakametro_tokuten.value<3){osakametro_f.osakametro_futsu_otona.value = Number("180")}
else if((osakametro_f.osakametro_tokuten.value<7)&&(!((osakametro_f.osakametro_q1.value == "光明池"&&osakametro_f.osakametro_q2.value == "和泉中央")||(osakametro_f.osakametro_q1.value == "和泉中央"&&osakametro_f.osakametro_q2.value == "光明池"))))
{osakametro_f.osakametro_futsu_otona.value = Number("230")}
//ここまで
//子供
if(osakametro_f.osakametro_tokuten.value<3){osakametro_f.osakametro_futsu_shoni.value = Number("90")}
else if((osakametro_f.osakametro_tokuten.value<7)&&(!((osakametro_f.osakametro_q1.value == "光明池"&&osakametro_f.osakametro_q2.value == "和泉中央")||(osakametro_f.osakametro_q1.value == "和泉中央"&&osakametro_f.osakametro_q2.value == "光明池"))))
{osakametro_f.osakametro_futsu_shoni.value = Number("120")}
}
</script>
<script>
// ボタンの要素を取得
var button = document.getElementById("button");
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;
});
button_2.addEventListener("click_2", function(e_2) {
e_2.preventDefault();
// 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_2 = parseInt(semboku_futsu_shoni_2, 10) + parseInt(osakametro_futsu_shoni_2, 10);
// 足し算の結果を別の入力フォームに表示
var futsu_shoni = document.getElementById("futsu_shoni");
futsu_shoni.value = sum_2;
});
</script>
を、例えば、普通大人運賃と普通小児運賃の計算をボタン一つで計算する場合、どうしたらいいですか。
一つなら挙動がうまくいきましたが、二つ目がいかんせんうまく挙動しません。
というより二つ目は空白のままです。
尚、自分がわかっているのはイベントは一つのhtmlで同時使用できないため、for関数を使用するのと、buttonタブであれば、[/code]for (let i = 0; i < buttonElements.length; i++) {
buttonElements.addEventListener('click', function () {}[/code]を使うことです。
自分が理解したいのは、例えば、
例えば、フォームで1+2と3*5があったとします。
これを一つのボタンで、同時に挙動させたい時がありますよね。
これは、つまりそういう条件下のプログラムです。