42384


webアプリを制作しているのですが、jQueryを使ってユーザがformで入力した値を以下のように取得しました。

[code]

    <script>
        $('button').click(function () {
    
            // 選択ボックス
            m = $('#minute').val();
            console.log(m);
        });
    
    
    </script>
    
[/code]

consoleにちゃんと入力した値が表示されるところまではきたのですが、そのあとjQueryの関数から抜けてconsoleを実行しても値が表示されません。

[code]

    <script>
        $('button').click(function () {
    
            // 選択ボックス
            m = $('#minute').val();//ここにvarを付けないとグローバルになると聞いた。
            console.log(m);
        });
        console.log(m);//mは定義されてないエラーが出る。
    
    </script>
    
[/code]

return文などを使うと思うのですがJqueryを挟んでいるかで上手く代入出来ないです。  
**試した事**

[code]

    <script>
        var m = $('button').click(function () {
    
            // 選択ボックス
            var m = $('#minute').val();
            return m;
        });
        console.log(m);
    
    </script>
    
[/code]

何かいい方法はないでしょうか？

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    
[/code]

jQueryファイルは上記から読み込んでいます。  
よろしくお願いします。


CC BY-SA 3.0
2018-03-14T03:04:01.133
42382
2018-03-14T10:51:54.423
22565
question
javascript html jquery html5
jQueryでhtmlから取得した値をグローバル変数に代入して違うコードに渡すには？？


Javascriptの変数スコープ  
<https://qiita.com/Kazuuuuuki/items/3c40bbe6e7bb7ff84e3e>  
はこちらを参考にしてもらうとしてソースとしてはグローバルなスコープにて変数を宣言してください。

[code]

    <script>
        var m;
        $('button').click(function () {
    
            // 選択ボックス
            m = $('#minute').val();
            console.log(m);
        });
        console.log(m);
    
    </script>
    
[/code]

=====================  
以下追記分

[code]

        var m;
        $('button').click(function () {
    
            // 選択ボックス
            m = $('#minute').val();
            console.log(m);
        });
        console.log(m); //ここはJavascriptが読み込み時に実行されるから絶対undefined
        
        $('#console_check').click(function () {
            console.log(m);//ここはチェックリンクがクリックされたときに実行される。
        });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <input id="minute" type="text" value="11" />
    <button>クリック</button>
    
    <a id="console_check" href="jacascript:void(0);">チェック</a>
[/code]

================  
追記2  
Jqueryのイベントハンドラの規約になりますが、  
通常returnに任意の値を返すことはできません。  
return falseを返すと別の処理が入ります。  
<https://qiita.com/r_abe01/items/2433caa6ce5257a440e7>


CC BY-SA 3.0
2018-03-14T03:29:58.240
42384
2018-03-14T04:41:41.397
2018-03-14T04:41:41.397
22665
22665
42382
answer

[code]

    <script>
        $('button').click(function () { // --(1)
    
            var m = $('#minute').val(); // --(2)
        });
        console.log(m); // --(3)
    
    </script>
    
[/code]

結論から言うと(3)の位置で(2)の値は取れません。  
他の方もおっしゃるようにjsの実行タイミングが異なるからです。

質問者さんはおそらくjsの実行タイミングを  
(1)→(2)→(3)  
で実行されるものと思ってらっしゃるようです。

実際には  
(3)→(ボタンがクリックされる)→(1)→(2)  
となります。

そのため、ボタンが押された後で、その値を使って外側で何か処理をしたいのであれば、  
その処理を別関数として定義しておき、その引数として実行されるべきだと思います。

例えば、

[code]

    <script>
        $('button').click(function () { // --(1)
    
            var m = $('#minute').val(); // --(2)
            outPutValue(m); // --(3)
        });
        function outPutValue(m) { // --(4)
            console.log(m); // --(5)
        }
    </script>
    
[/code]

とすれば、  
(ボタンが押される)→(1)→(2)→(3)→(4)→(5)  
の順に実行されるはずです。


CC BY-SA 3.0
2018-03-14T10:51:54.423
42391
2018-03-14T10:51:54.423
23695
42382
answer