【JavaScript】addEventListener内（関数の入れ子）の変数を外でも使いたい

Question

前提・実現したいこと

addEventListenerメソッドを使用した関数の中に、さらにaddEventListenerメソッドを使用した関数があり、その中で算出された値を関数外で使用したい。
(具体的には、同様の関数の入子によって算出された値と足し合わせたいです)

素人丸出しの質問かもしれませんがご教授お願いします

発生している問題・エラーメッセージ

該当のソースコード

const totalProtein = document.getElementById("total-pro");
totalProtein.innerHTML = Math.floor(totalPro)

const pfc = function () {
   
   const selectMeet = document.getElementById("meet");

    selectMeet.addEventListener('change', function (){

      const meetSelectBox = document.getElementById("meet");
      const dataNumP = meetSelectBox.options[ meetSelectBox.selectedIndex].getAttribute("data-protein");
      
      const quantityInput = document.getElementById("quan-input");
      quantityInput.addEventListener("input", () => {
         const inputValue = quantityInput.value;

         const mulProInput = document.getElementById("pro-content")
         mulProInput.innerHTML = Math.floor(inputValue * dataNumP)
         
         var totalPro = Math.floor(inputValue * dataNumP)
      })   
  })
};
 
window.addEventListener("load", pfc);
 

試したこと

関数内でvarに代入してみましたが、そもそも二行目の段階で”tatalpro”が定義されてないとなりました

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

因果律を破らない限り不可能です。外側のコードはイベントより前に実行完了してしまいますので、イベント内での結果を取る方法はありません。

---

本題ではありませんが、addEventListener('change')の中でaddEventListenerを行う、という構造そのものが妥当ではない、と考えます。

外側のイベントが発生するたびに、内側のイベントが増え続け、何度もイベントリスナが実行されることになってしまいます。

Comments

[yasu0205]

貴重なご意見ありがとうございます。ちょっとアイデア湧きましたので試してみます