２つの計算結果を一つのボタンで同時挙動させたいです。

フォーラム(掲示板)ルール
フォーラム(掲示板)ルールはこちら　　※コードを貼り付ける場合は [code] と [/code] で囲って下さい。詳しくはこちら
返信
えっぴ～

２つの計算結果を一つのボタンで同時挙動させたいです。

#1

投稿記事 by えっぴ～ » 1年前

２つの計算結果を一つのボタンで同時挙動させたいです。
他でも出しましたが、明確な回答は得られなかったです。
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>
尚、大阪メトロの部分は、id名を入れ替えたらできる話なので、今回は割愛しました。
を、例えば、普通大人運賃と普通小児運賃の計算をボタン一つで計算する場合、どうしたらいいですか。
一つなら挙動がうまくいきましたが、二つ目がいかんせんうまく挙動しません。
というより二つ目は空白のままです。
尚、自分がわかっているのはイベントは一つのhtmlで同時使用できないため、for関数を使用するのと、buttonタブであれば、[/code]for (let i = 0; i < buttonElements.length; i++) {
buttonElements.addEventListener('click', function () {}[/code]を使うことです。
自分が理解したいのは、例えば、
例えば、フォームで1+2と3＊5があったとします。
これを一つのボタンで、同時に挙動させたい時がありますよね。
これは、つまりそういう条件下のプログラムです。
ページトップ
アバター
みけCAT
記事: 6734
登録日時: 13年前
住所: 千葉県
連絡を取る:
みけCAT に連絡する

Re: ２つの計算結果を一つのボタンで同時挙動させたいです。

#2

投稿記事 by みけCAT » 1年前

えっぴ～ さんが書きました: ↑
1年前

コード: 

var button = document.getElementById("button");
var button = document.getElementById("button");
同じことが2回書かれています。1個消したほうがいいでしょう。
えっぴ～ さんが書きました: ↑
1年前

コード: 

button_2.addEventListener("click_2", function(e_2) {
button_2 は定義されていません。
えっぴ～ さんが書きました: ↑
1年前
 普通大人運賃と普通小児運賃の計算をボタン一つで計算する場合、どうしたらいいですか。
普通大人運賃と普通小児運賃の計算をボタン一つで計算するプログラムを書いて実行したらいいと思います。
たとえば、

コード: 

button.addEventListener("click", function() {
    // 普通大人運賃の計算をするプログラム
    // ...

    // 普通小児運賃の計算をするプログラム
    // ...
});
みたいな。
えっぴ～ さんが書きました: ↑
1年前
 イベントは一つのhtmlで同時使用できないため
仕様上、そんな制約は無いと思います。
スキル不足や縛りプレイなどによる制約は知りませんが。
複雑な問題？マシンの性能を上げてOpenMPで殴ればいい！(死亡フラグ)
ページトップ
返信

“C言語何でも質問掲示板” へ戻る