Scriptタグ内のカスタムdata属性の値を変数にして外部javascriptに渡したい

Question

前提・実現したいこと

HTML中の<script>タグ内にあるカスタムdata属性の値を動的にして外部javascriptに渡す必要があり、javascriptで内容を書き換えてみているのですが、どうやっても初期値(この場合は10)を渡してしまいます。
どのようにすれば引数を動的に出来るのでしょうか？
そもそも根本的にアプローチを間違えているような気もします。
javascript初心者で困っています。

該当のソースコード

<script src="https://exsample.com" class="exsample-button"
    data-total="10"
    data-unit="gram"
    data-description="総重量"
</script>

<script>
function changeTotal() {
var totalgram = 0;
  var totalgram = Math.round(gram * qt * 100) / 100
  if(totalgram == 0) {totalgram = 0;}
$(".exsample-button").data('total',totalgram);
</script>

お知恵を拝借できれば幸いです。どうぞよろしくお願いいたします。

Answer 1

jQuery の Data API はjQueryオブジェクトで包括した要素と紐付く独自のキャッシュ（キーバリューストア）です。data() メソッドは、カスタムdata属性を初期値として読みますが、書き換えはできません。

• https://github.com/jquery/jquery/blob/master/src/data/Data.js

カスタムData属性を書き換えたい場合、標準実装のAPI Element.dataSet を使うことになります。

尚、標準実装のAPIで変更後、jQuery の data() APIを使った変化については未確認です。

Comments

[minekamo]

ご回答ありがとうございます。
しかし、いまひとつ記述が分からずにおります。。
大変お手数で申し訳ないですが具体的な記述を教えていただけないでしょうか？
どうぞよろしくお願いいたします。

[AkitoshiManabe]

> 引数を動的に出来るのでしょうか？
これは、https://exsample.com にクエリ文字（URLパラメータ）を与えたい ということでしょうか？

[minekamo]

ご返信遅れて申し訳ございません。
そうなんです。パラメーターの内容を可変(動的)で渡したいのです。

[AkitoshiManabe]

URLパラメータを渡すものであれば、ブラウザのアドレスバーに https://example.com/?param=val&param2=val2 のように叩けば何らかの応答が得られます。
script[src="path/to/script.js"] は src属性に指定された 外部javascript（path/to/script.js） を読み込むマークアップになります。この外部javascript を読み込んだ後で、 javascript 関数にパラメータを渡すのではないでしょうか。

Answer 2

以前、同様の質問に回答しました。
https://teratail.com/questions/224554

ここで挙げた例がわかればどうにでもなるでしょう。
https://teratail.com/questions/158588

https://api.jquery.com/data/
https://api.jquery.com/attr/

Comments

[minekamo]

ご返信遅れて申し訳ございません。
ご返信ありがとうございます。参考にさせていただきたいと思います。