質問: 下記のように、コードを記載した場合、 if文の中の i1、i2_1、i2_2はそれぞれnot definedになってしまいます。 その前のfunction内(ローカルスコープ内)でvar宣言をしてないので、grobal scopeとして使用できるのではないでしょうか? 原因とfunction外で当該変数を使用する方法について、アドバイスをいただければ幸いです。 なお、function内にif文のブロックを書けばと言うご指摘もあるとともいますが、 ここではsetTimeoutをして要素が動的に変化した後の.text()を取得しなければならないことから このような構造になっております。 setTimeoutを指定しない場合には変化前の要素のtextを取得してしまうため、うまくいきません。。。 このような方法でsetTimeoutを使用すること自体、あまり望ましい使い方ではないと言うご指摘を頂く きはいたします。。。 よろしくお願い申し上げます。 ``` $(function(){ $('#select_inside_1>div>div>div,#select_inside_2_1>div>div>div,#select_inside_2_2>div>div>div').on('click', function() { setTimeout(function(){ i1=$('#select_inside_1>div>div:eq(0)').text(); i2_1=$('#select_inside_2_1>div>div:eq(0)').text(); i2_2=$('#select_inside_2_2>div>div:eq(0)').text(); console.log(i1); },1) if ((!i1=="【賃貸/購入 選択")&&(!i2_1=="【資産 選択】"||!i2_2=="【資産 選択】")) { alert('execution'); } }); }) ```
回答: まず、インデントが崩れているので読みづらいですが、それはいったん置いておきます。 そして、「暗黙のグローバル変数」は今時のJavaScriptでは**使うべきでない**機能です。`'use strict';`と書いた場合やクラスの中、ES Moduleの中では無効になります。内側で事前に宣言しておけば、さらに内側でも使えます。 ``` $(function(){ var i1, i2_1, i2_2; // ここでローカル変数として宣言 $('#select_inside_1>div>div>div,#select_inside_2_1>div>div>div,#select_inside_2_2>div>div>div').on('click', function() { setTimeout(function(){ i1=$('#select_inside_1>div>div:eq(0)').text(); i2_1=$('#select_inside_2_1>div>div:eq(0)').text(); i2_2=$('#select_inside_2_2>div>div:eq(0)').text(); console.log(i1); },1) if ((!i1=="【賃貸/購入 選択")&&(!i2_1=="【資産 選択】"||!i2_2=="【資産 選択】")) { alert('execution'); } }); }) ``` さらに、`setTimeout`しているので、`if`文は**`setTimeout`の中身より先に実行されます**。取ってきても`undefined`になるのは、まだセットしていないからです。