質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1199閲覧

ローカルスコープの変数を使用できない

SugiuraY

総合スコア317

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/02/08 04:03

編集2018/02/08 04:03

下記のように、コードを記載した場合、
if文の中の
i1、i2_1、i2_2はそれぞれnot definedになってしまいます。
その前のfunction内(ローカルスコープ内)でvar宣言をしてないので、grobal scopeとして使用できるのではないでしょうか?
原因とfunction外で当該変数を使用する方法について、アドバイスをいただければ幸いです。

なお、function内にif文のブロックを書けばと言うご指摘もあるとともいますが、
ここではsetTimeoutをして要素が動的に変化した後の.text()を取得しなければならないことから
このような構造になっております。
setTimeoutを指定しない場合には変化前の要素のtextを取得してしまうため、うまくいきません。。。
このような方法でsetTimeoutを使用すること自体、あまり望ましい使い方ではないと言うご指摘を頂く
きはいたします。。。

よろしくお願い申し上げます。

JavaScript

1$(function(){ 2 $('#select_inside_1>div>div>div,#select_inside_2_1>div>div>div,#select_inside_2_2>div>div>div').on('click', function() { 3 setTimeout(function(){ 4 i1=$('#select_inside_1>div>div:eq(0)').text(); 5 i2_1=$('#select_inside_2_1>div>div:eq(0)').text(); 6 i2_2=$('#select_inside_2_2>div>div:eq(0)').text(); 7 console.log(i1); 8},1) 9if ((!i1=="【賃貸/購入 選択")&&(!i2_1=="【資産 選択】"||!i2_2=="【資産 選択】")) { 10alert('execution'); 11} 12 13 }); 14})

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/02/08 04:18

どちらにしてもif文はsetTimeoutで指定したfunctionの前(i1の代入前)に実行されます。なぜ中にしないのか説明願います。
SugiuraY

2018/02/08 04:47

コメント有難うございます。 i1=$('#select_inside_1>div>div:eq(0)').text();等3つの要素は$('#select_inside_1>div>div>div,#select_inside_2_1>div>div>div,#select_inside_2_2>div>div>div').on('click',によってtext内容が変わってしまい、動的に変更後のテキストを取得したい考えております。動的に変更するトリガーをクリックしてsetTimeoutを指定しないと目的としない、変更前のtextが取得されてしまうため、タイムラグで解決するしか思いつかなかったためです。
x_x

2018/02/08 04:58

その処理が書かれていませんが、処理の次に書けばいいのでは?
SugiuraY

2018/02/08 05:06

コメントありがとうございます。その処理とはalert('execution');のことでしょうか?つまり、A要素をクリックするとA要素の中にあるテキストが変わり、その変更後のテキストを監視して、if文で判定してケースに応じて処理を実行という流れです。ご意図されるその処理とは又別の観点でしょうか?理解不足で申し訳ございません。
x_x

2018/02/08 05:09

本当はtext内容を変える処理があるのですよね? その次に書くということです。
SugiuraY

2018/02/08 08:35

$(function(){$('#hoge').on('click',function(){($('#foo').text('abcd'));alert($('#foo').text())...といったイメージでしょうか。
SugiuraY

2018/02/08 08:37

すみません、個々でのコードはあまりにも見づらかったですね。。。
guest

回答2

0

ベストアンサー

まず、インデントが崩れているので読みづらいですが、それはいったん置いておきます。

そして、「暗黙のグローバル変数」は今時のJavaScriptでは使うべきでない機能です。'use strict';と書いた場合やクラスの中、ES Moduleの中では無効になります。内側で事前に宣言しておけば、さらに内側でも使えます。

javascript

1$(function(){ 2 var i1, i2_1, i2_2; // ここでローカル変数として宣言 3 $('#select_inside_1>div>div>div,#select_inside_2_1>div>div>div,#select_inside_2_2>div>div>div').on('click', function() { 4 setTimeout(function(){ 5 i1=$('#select_inside_1>div>div:eq(0)').text(); 6 i2_1=$('#select_inside_2_1>div>div:eq(0)').text(); 7 i2_2=$('#select_inside_2_2>div>div:eq(0)').text(); 8 console.log(i1); 9 },1) 10 if ((!i1=="【賃貸/購入 選択")&&(!i2_1=="【資産 選択】"||!i2_2=="【資産 選択】")) { 11 alert('execution'); 12 } 13 }); 14})

さらに、setTimeoutしているので、if文は**setTimeoutの中身より先に実行されます**。取ってきてもundefinedになるのは、まだセットしていないからです。

投稿2018/02/08 04:13

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2018/02/08 04:58

コメント有難うございます。そのような変数の使い方を「暗黙のグローバル変数」とよび、非推奨の使い方なんですね。今回であれば、後から実行されるif文のブロックにもsetTimeoutで2以上を設定すれば、セットされるということなのでしょうが、あまり望ましくないということですね。 動的に変更したあとの$('#select_inside_1>div>div:eq(0)').text();を取得したく、タイムラグを私用しており、またこの動的に変更される要素はクリックされる要素自体がトリガーになっているので、時間差でtext()を取得しようというアイデアに至りました。 しかし、今実行結果を確認したのですが、同じスコープ内に書いてある console.log(i1);で動的に変更後のテキストが取得できているのでif文のブロックもおなじ内側にかけることに気がついたのですが、こうなると何故setTimeout内のconsole.log(i1);が変更後のtextを取得できてしまったいるのか不思議です。。 インデントについては、一人でしか開発をしたことがないので、強く意識したことがないのですが、 ネスト化するためにインデントをおき、階層がふかくなるたびに右側によっていくというところが一般的に見易いのでしょうか?
maisumakun

2018/02/08 05:20

> 何故setTimeout内のconsole.log(i1);が変更後のtextを取得できてしまったいるのか不思議です。。 変更後だからです。
SugiuraY

2018/02/08 08:19

コメント有難うございます。 setTimeout(function(){ //処理1; //処理2; },1) は1/1000秒後に処理1と処理2を同時に行うため、変更されないと勘違いをしていました。 処理1でテキストが変更してその後処理2で変更後のテキストが取得できるのですね。 1/1000秒後の処理で同時ながらも上から順番に処理されることを理解いたしました。
maisumakun

2018/02/08 08:24

なお、この場合の「1」というのは実質的な意味はありません。正確に1ミリ秒ということではなく、「onclickで動く他のイベントが片付いたら」実行される、ということになります。
guest

0

setTimeoutを利用している目的がわかりません。
同処理は非同期なので後ろの処理が意図しているより先に(つまり同時に)
走ってしまっているのでは?

投稿2018/02/08 04:07

yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SugiuraY

2018/02/08 05:02

yambejp様 いつもコメントありがとうごさいます。 仰るとおりの点が原因であることがわかりました。ただ、反対にsetTimeoutのブロック内で出力している console.log(i1);が動的に変更後のテキストを出力しているのが読み解けなくなりました。。 今回はクリックされる要素によって、text();の内容が変わるため、変わった後のテキストを取得すべきsetTimeoutで意図的に変更後の要素を取得しようとタイムタグを設けました。しかし、上でも言及しましたが、console.log(i1);がsetTimeoutのブロック内に書かれているのに変更後のテキストが取得できているのが謎なので、すこしsetTimeoutの仕様を調べてみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問