【JS】selectでchangeした時のデータを外の変数で保持するには？

javascriptで複数のセレクトメニューを対象に、選択した時点で値を取得して、その合計を計算したいのですが、値を外にもって出ることができません、アドバイスをいただけないでしょうか？

【HTML】
<select id="aPrice">
<option value="100">100</option>
<option value="200">200</option>
<option value="300">300</option>
<option value="400">400</option>
<option value="500">500</option>
</select>

<select id="bPrice">
<option value="1500">1500</option>
<option value="1800">1800</option>
<option value="1300">1300</option>
<option value="2500">2500</option>
<option value="4800">4800</option>
</select>

【JS】
const total = 0;

const aPrice = document.getElementById("aPrice");
let aVal = 0;
aPrice.addEventListener("change", function () {
aVal = aPrice.value;
})

const bPrice = document.getElementById("bPrice");
let bVal = 0;
bPrice.addEventListener("change", function () {
bVal = bPrice.value;
})

それぞれの取得した値、上記の場合aVal とbVal に選択した値が入っているのですが、これらの金額を外の変数 total に入れて合計を出したいのですが、それぞれの関数の外に出してしまうと値が取得できなくなってしまいます。

そもそもセレクトの値を取得するにあたって方法が根本的に間違っていますでしょうか？
初歩的な質問ですみません、アドバイスを頂けますと幸いです。
宜しくお願いします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2023/11/20 19:00

こんばんは

＞その合計を計算したいのですが、値を外にもって出ることができません、
ご提示の方法であれば、関数外からも参照できるはずです。
（関数外で、変数 aVal, bVal が宣言されていますので）
ただし、セレクト要素が変更された際に、変数にその値が代入されるようになっていますので、その後で合計の計算をしないと、正しい値を得ることはできません。

実際に参照する部分が提示されていませんので、推測になってしまいますが・・
想像するところ、ご提示のスクリプトに続けて
　total = aPrice + bPrice
などと記述していませんでしょうか？
その場合は、初期値のままでの計算になるので、 aVal, bVal 共に0の状態なので、合計の結果は0になると思います。

＞アドバイスをいただけないでしょうか？
合計を算出なさりたければ、changeイベントの処理内で合計を計算するようにしてください。
（ aVal, bVal に値が入った後で計算するという意味です）
そうすれば、お望みの結果になるものと想像します。


ご提示の構文形式だと、それぞれ別の処理になっているので記述が重複してしまいますが、まとめて処理することも可能です。
以下は、そのような考え方での一例です。

<script>
{
const
ids = ['aPrice', 'bPrice'],
V = id => document.getElementById(id).value * 1;

document.addEventListener('change', e => {
if(ids.indexOf(e.target.id)<0) return;
const total = V(ids[0]) + V(ids[1]);
alert(`合計＝${total}`); // ひとまずアラート表示
});
}
</script>

この回答へのお礼

ありがとうございます！
ちょっと私には書き方が難しい部分があるのですが、調べながら進めてみたいと思います。

>>total = aPrice + bPrice
漏れており申し訳ありません、おっしゃる通りこのような感じで取得しておりました。

V = id => document.getElementById(id).value * 1;
↑このような書き方も初見でしたので、調べてみたいと思います。
このような初心者の質問にご回答いただきまして感謝申し上げます、ありがとうございます！mm

お礼日時：2023/11/20 21:26