jQueryの変数をインラインの<script>内で使いたい

Question

head内でjsフォルダの中にあるscript.jsを読み込んでいます。
script.jsの内容は下記のような感じです。↓↓

jQuery(function($){

$('.btn').on('click',function(){

  var amount = $('#amount').val();

});

});

そしてHTMLのbody内に下記のようなスクリプトを書いています。

<script>
jQuery(function($){

  if( amount > 10 ){
    document.write("<div class="hoge">表示させたい内容</div>");
  }

});
</script>

JSファイルではクリックした値を保存して、HTMLの中にインラインで書いたjavascriptでその変数を表示させたいのですが表示されません。

グローバルスコープにしたくてvarを外したりもしてみましたが、取得出来ていないようで困っています。。

どのようにすれば、他の関数内の変数を同ページのインラインJSで扱うことができるのでしょうか？

Answer 1

JSファイルではクリックした値を保存して、HTMLの中にインラインで書いたjavascriptでその変数を表示させたいのですが表示されません。

仮にグローバル化できたとしても、クリックしたタイミングでしか変数が入りませんので、jQuery(function(){})内で実行する時点では、まだ値を取れていません。この方法で実現するのは無理です。

あと、document.writeは、基本的に読み込みと同時に書き出す分にしか使えません。$().append(HTML)などを使いましょう。

Comments

[lenlen]

ありがとうございます！とすれば、インラインJSの中でもう一度値を取得して変数に入れなければだめでしょうか？

Answer 2

変数で共有する必要性を感じませんでした。

<input type="number" id="amount" value="100">
<input type="button" value="btn" class=".btn">
<script>
'use strict';
jQuery(function ($) {
  $('.btn').on('click',function (event) {
    console.log(event.type);
  })
});
</script>
<script>
'use strict';
if ( $('#amount').val() > 10 ) {
  console.log($('script:last')[0])
  $('script:last').before('<div class="hoge">表示させたい内容</div>');
}
</script>

Re: lenlen さん

Answer 3

どうしたいのかもよくわからなかったのですが、大胆にエスパーすると

<div>
 <input type="number" id="amount" value="10" />
 <button type="button" class="btn">show</button>
 <output id="output"></output>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="script.js"></script>
<script>
jQuery(function($){
  $('.btn').on('click', function(event) {
    $('#output').val(amount.toString());
  });
});
</script>

script.js

var amount = 0;
jQuery(function($){
  amount = parseInt($('#amount').val(), 10);
  $('#amount').on('change', function(event) {
    amount = parseInt($('#amount').val(), 10);
  });
});