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

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

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

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

Q&A

解決済

2回答

8381閲覧

if文が発動してくれません........

dialbird

総合スコア379

JavaScript

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

0グッド

1クリップ

投稿2015/11/19 02:21

こんにちは。

まずグローバル変数を宣言し、そこに新しい値を代入することで、if文が発動するようにしたいのですが、上手くいきません。

html

1 <div id="test" style="width:100px; height:100px; background:red;"></div> 2 <button id="btn">押して</button>

javascript

1<script> 2 $(function(){ 3 4 var hensuu = ''; 5 6 $('#btn').click(function(){ 7 hensuu = 'stage1'; 8 }); 9 10 11 if(hensuu === 'stage1'){ 12 $('#test').css('background','green'); 13 } 14 }); 15</script>

何が原因なのでしょうか?よろしくお願いいたします!

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

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

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

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

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

guest

回答2

0

即時関数($(function() { ~ });)が動作したタイミングで、

  • hensuuの初期化
  • btnがクリックされた時の動作を定義
  • if文の実行

が行われます。当然この時点ではhensuuには値が入っていないため、if文の中は通らないです。

その後、btnをクリックした際に、登録した動作を実行しますが、定義された動作はhensuuの値の変更のみのため、hensuuの値を変更して終了となります。

原因としては、if文を書いてある位置がページがロードされた際に動作する箇所にあるため、クリックされた際にif文そのものが呼ばれていないことが原因です。

クリックされた際にif文を呼びたいのであれば、クリック時の動作( $('#btn').click(function(){ ~ });)の中にif文を移せば動作させられるかと思います。

投稿2015/11/19 02:37

k.tada

総合スコア1679

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

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

dialbird

2015/11/19 02:40

ご返答ありがとうございます! 皆様のお陰で、無事に問題を解決をすることができました! ありがとうございました!
guest

0

ベストアンサー

記載されたコードの場合、画面読み込み完了(DOM構築完了)時に下記の処理が行われます。

  1. hensuu を定義
  2. ボタンクリックイベントを定義
  3. hensuu が 'stage1' だったら #test 要素の背景を変更する

つまり、if 文(3)は DOM 構築完了時に呼ばれます。
この時、hensuu の値は '' でしかない為、if 文は常に false となります。

ボタンクリック時に if 文内を実行したいなら、ボタンイベントの関数内にて if を定義してください。

Javascript

1// DOM 構築完了時に中の処理を実行 2 $(function(){ 3 // hensuu を定義 4 var hensuu = ''; 5 6 // ボタンクリックイベントを追加 7 $('#btn').click(function(){ 8 // hensuu に stage1 をセット 9 hensuu = 'stage1'; 10 11 // if 文評価実行(上部で stage1 をセットしている為、常に true になります) 12 if(hensuu === 'stage1'){ 13 $('#test').css('background','green'); 14 } 15 }); 16 });

もし、別の何らかのアクションが発生した際に実行したい場合は、該当のイベントを定義する必要があります。

投稿2015/11/19 02:28

編集2015/11/19 02:33
usk

総合スコア397

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

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

dialbird

2015/11/19 02:32

早速のご返答ありがとうございます! お陰様で速攻で解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問