前提・実現したいこと
つい先日から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;が付きました。
こちらが意図した動きなのですが、なぜ最初のコードでは違った動きになってしまうのでしょうか?
大変初歩的な質問ですが、ご回答よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/25 21:12