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

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

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

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

Q&A

解決済

1回答

2244閲覧

JavaScript・if文の順番について

eggplant_bc

総合スコア20

JavaScript

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

0グッド

1クリップ

投稿2018/02/25 00:26

前提・実現したいこと

つい先日からJavaScriptの勉強を始めた者です。
JS勉強サイトでJavaScriptでのモーダルの作り方を見たので実際に自分で作ってみたところ、if~elseの記載順序によって意図した通りに動いたり動かなかったりする現象が起こりました。
どちらも動いてはいるのでコンソールにエラーが出ていないのと、ボタンへのクリックイベントでモーダルのdisplayをnoneにしたりblockにしたりしたいので、何故順序によって動きが変わるのかを教えていただきたく、質問させていただきました。

該当のソースコード

btn_modal.onclick = function() { if (modal_info.style.display === "none") { modal_info.style.display = "block"; } else { modal_info.style.display = "none"; } };

試したこと

デフォルトで、modal_infoのdisplayはnoneに設定しています。
自分で記述した際に上記のコードを書いたら、btn_modalというボタンをクリックした際にmodal_infoのdisplay: none;が消されて、JavaScriptによってもう一度display: none;が付くという現象が起こりました。
そこで

btn_modal.onclick = function() { if (modal_info.style.display === "block") { modal_info.style.display = "none"; } else { modal_info.style.display = "block"; } };

に変更してみたところ、ボタンをクリックするともともとmodal_infoに付いていたdisplay: none;が消されてdisplay: block;が付きました。
こちらが意図した動きなのですが、なぜ最初のコードでは違った動きになってしまうのでしょうか?

大変初歩的な質問ですが、ご回答よろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

確証は持てませんが,

デフォルトで、modal_infodisplaynoneに設定しています。

を**style要素(もしくはlink要素)で行っている**のが原因です.

プロパティmodal_info.style.displaymodal_infoノードのstyle属性値を取得するためのものです. そのため, このノードのstyle属性にdisplayプロパティが存在しなければmodal_info.style.displayから得られる値は""(空文字列)となります.

一方あなたはdisplayで得られる値がnoneblockの二つしか無いと思い込んでいるのでif文の挙動がおかしいように見えているのです.


この問題を解消するには次の何れかの修正を行います.

  • display値をmodal_infoノードのstyle属性に直接記述する.
  • display値の取得をwindow.getComputedStyleメソッドを介して行う.

投稿2018/02/25 01:20

編集2018/02/25 05:04
defghi1977

総合スコア4756

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

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

eggplant_bc

2018/02/25 21:12

defghi1977さん、ご回答いただきありがとうございました! とても分かりやすい解説で、何故うまく行かなかったのか理解できました。 まさに、modal_infoへのdisplay: none;を外部CSSファイルに記述していました…。 .styleがノードのstyle属性値を取得するものだとは思いつきませんでした。 本当にありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問