onclickイベントをトリガーとして取得したvalueの関数外への持ち出し

Question

前提・実現したいこと

Jqueryでjavascriptを勉強中です。
勉強のためにアマゾンの買い物カゴのような決済システムのようなものを作ろうとしています。
valueとして取得した商品点数や金額を一度変数として保持し、最終的に合計金額を計算したいです。
下記のようなonclickイベントで、valueを取得した後、取得した値を関数の外に持ち出すにはどうしたらいいでしょうか。

該当のソースコード

    <input type="text" id="text_data">
    <button id="send">送信</button>
    <script>
        $("#send").on('click',function(){
            let retval = $("#text_data").val();
        });
    </script>

試したこと

ローカル変数であるretvalを関数の外に持ち出せないことは理解しております。
変数として保持できないのであれば、returnで戻り値としてvalueが得られるのではないかと考え、即時関数の戻り値の取得を試みましたが、上手くいきませんでした。
苦肉の策としてretvalの値を.html()や.text()で一度htmlに戻し、関数の外で値を再取得するという方法は上手くいきましたが、他に方法はないでしょうか？

Comments

[kei344]

その値を後でどのように使うのでしょうか。質問文に追記いただけませんか？

[X-caret]

ご回答ありがとうございます。大変勉強になります。
勉強のためにアマゾンの買い物カゴのような決済システムのようなものを作ろうとしています。valueとして取得した商品点数や金額を一度変数として保持し、最終的に合計金額を計算したいです。

[kei344]

この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文になるべく具体的に追記することをお勧めします。（他の回答者にも伝わりやすくなります）

Answer 1

グローバル変数に代入すれば持ち出せますよ。

$("#send").on('click',function(){
    window.retval = $("#text_data").val();
});

とか

Comments

[x_x]

エラーになるのでは？

[H40831]

let いらなかったですね。失礼しました。修正しました。

[X-caret]

ご回答ありがとうございました！勉強になりました。

Answer 2

こんにちは、X-caretさん

質問拝見しました。

まず即時関数の戻り値の取得で試した部分が、

        let retval = $("#send").on('click',function(){
            return $("#text_data").val();
        });

という形であれば、jQueryオブジェクトのonメソッドの返り値はjQueryオブジェクトになるため、コールバックで返している値を取得することはできません。

.on() - jQuery API documentation

方法としては、コールバックの外に変数を定義して、持ち回すのが良いかと思います。

  <input type="number" id="text_data">
  <button id="send">送信</button>
  <div id="total"></div>
  <script>
    var total = 0;

    function addTotal(num) {
      total = total + num;
      $('#total').text(total);
    }

    $("#send").on('click', function(){
      // let retval = $("#text_data").val();
      var retval = parseInt($("#text_data").val(), 10);
      addTotal(retval);
    });
  </script>

ざっくり書くとこんなイメージでしょうか。jQueryでクライアント側のデータを管理するのは大変ですが、考え方の一つとして、みていただければと思います。

以上、参考になれば幸いです。

Comments

[X-caret]

ご回答ありがとうございます。何ができて何ができないのか、非常にクリアになりました。ありがとうございました。