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

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

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

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

jQuery

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

Q&A

解決済

4回答

2445閲覧

関数スコープ外からスコープ内の変数を取得できるか

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

jQuery

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

0グッド

2クリップ

投稿2017/10/20 09:26

###前提・実現したいこと
初歩的な質問かもしれませんが、よろしくお願い致します。

以下のコードにおいて、console.log(aaa);undefinedとならずに、function内の$('#test').find('.hoge').text();を取得する方法はございますか?

変数のスコープに関する知識は一応頭にあるつもりなのですが、このようにスコープ内の変数を取得したい、という場合はどのように書くのが良いか、お教えいただけるでしょうか?

###該当のソースコード

$('ul li').on('click', function () { var aaa = $('#test').find('.hoge').text(); var bbb = $('#test').find('.hogehoge').text(); }); console.log(aaa); //undefined

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

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

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

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

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

guest

回答4

0

スコープ以前に無理です。
なぜならaaaに値が入るのは「クリックされたとき」で、logを出力されるのは「クリック処理を登録するとき」だからです。

コード的には後ろに書かれているので処理順序がごっちゃになりますが、on('click')の中の処理が走るのはクリックされたとき、console.log(aaa)の処理が走るのはページが読み込まれたとき、なので、どうあがいてもクリックしたときの内容はページが読み込まれた時点では存在しません。

追記

ただ単に「最後にクリックされたliの内容」を保持しておきたいのでしたら、以下のようなコードがよいと思います。

javascript

1$('ul li').on('click', function () { 2 window.aaa = $('#test').find('.hoge').text(); 3 window.bbb = $('#test').find('.hogehoge').text(); 4}); 5// どこか別の処理のタイミングで 6console.log(window.aaa);

windowというオブジェクトはページ全体で1つしか存在しないグローバルスコープ変数です。以下のコードは同義です。

javascript

1// ①window変数にプロパティとして追加 2window.aaa = 'test'; 3 4// ②変数宣言を一切せずいきなりaaaと宣言する 5aaa = 'test';

ただし、あまりこういったグローバルな変数を使うのは推奨しません。処理の構造自体を少し考え直すほうがのちのちよい経験になるかと思います。

投稿2017/10/20 09:31

編集2017/10/20 09:38
masaya_ohashi

総合スコア9206

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

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

退会済みユーザー

退会済みユーザー

2017/10/20 10:15 編集

いつも丁寧なご回答を有難うございます。グローバルな変数を使うことでしか実現は難しいのですね。だとすると、やはり処理の構造自体を考え直すべきかと思いました。 ちなみに、重ね重ねのご質問で大変恐縮なのですが、クリックしていない状態(ページを読み込んだ時)で```aaa```は存在(読み込み時に```$('#test').find('.hoge').text();```を取得している状態)しており、かつクリックの度に```aaa```の値(クリックの度に```$('#test').find('.hoge').text();```の値は変化する)が変わり、かつその```aaa```を```on('click')```の外で使用できるようにすることは可能なのでしょうか? ※コード部分を```で囲んだのですが、上手く表示されませんでした・・読みづらく申し訳ありません。
guest

0

ベストアンサー

クリックしていない状態(ページを読み込んだ時)でaaaは存在(読み込み時に$('#test').find('.hoge').text();を取得している状態)しており、かつクリックの度にaaaの値(クリックの度に$('#test').find('.hoge').text();の値は変化する)が変わり、かつそのaaaon('click')の外で使用できるようにすることは可能なのでしょうか?

どうせコード全体を$(function () { ... })で囲うと思うので、その中でaaaを宣言すればグローバル変数的に使うことができ、かつグローバルスコープを汚染しません。

$(function () { ... })

lang

1var aaa = $('#test').find('.hoge').text();

とすれば、読み込み時にaaaの値をセットできます。

簡単なdemo

このような変数と表示の更新がいろんなところで起きるようなプログラムを作ろうとしているなら、reactなどのUIライブラリを使うとすっきりしますよ。

投稿2017/10/21 09:48

karamarimo

総合スコア2551

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

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

0

JavaScript はイベント時に処理を走らせることが多いので、別イベントで作成した値を使用したければその外側のスコープにある変数に格納するなど考えればよいです。

HTML

1<div id="test"> 2 <div class="hoge">123</div> 3 <div class="hogehoge">456</div> 4</div>

JavaScript

1var aaa = 'default'; 2var bbb = 'default'; 3$('ul li').on('click', function () { 4 aaa = $('#test').find('.hoge').text(); // 123 5 bbb = $('#test').find('.hogehoge').text(); // 456 6}); 7console.log(aaa); // default 8$('#test').on('click', function () { 9 console.log(aaa); // 'ul li'が1回でもクリックされていたら 123、されてなかったら default 10});

投稿2017/10/21 08:49

kei344

総合スコア69364

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

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

0

要するにクリックされた後でどこか別の処理で値をとりたいというのであれば
hiddenとかに渡せばいいんじゃないでしょうか。

投稿2017/10/21 08:23

deigo

総合スコア200

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問