IE11で〇〇.style.display = 'none'が効かない

Question

iEとIE以外のブラウザでメールフォームの切り替えをしようと思い、Promis関数がある場合、ない場合で判定をとってdisplay: 〇〇;をjsで制御しよと思い、実装したところVirtualBoxのIE11で反映されないことに気づきました。

const aaa = document.querySelector('.abc')
if (typeof Promise === 'function') {
  aaa.style.display = 'block' //chrome,firefox,safariでは適用されている
} else {
  aaa.style.display = 'none' //VirtualBoxのIE11では何も変わらない
}

上記のコードで実装しているのですが、何かおかしな記述をしている箇所があれば教えていただきたいです。
よろしくお願いします。

Comments

[okina]

aaa.style.display = 'none' の部分が、
//chrome,firefox,safariでは適用されているのに、
//VirtualBoxのIE11では何も変わらない
という認識でよろしいですか？

[hosodaaaaa]

@okina さん
はい、その認識で問題ないです!
chrome,firefox,safariではhtml elementsに```style='display: block;'```と記載されて要るのですが、
IEではそのような記述はされておらず、またIEではconsole.logが使用できないので、デバッグに苦しんでおります。

Answer 1

IEでconsole.log()が使えないというのは聞いたことがないですし、

  <div>
    <div>要素</div>
    <div>要素</div>
    <div>要素</div>
    <div>要素</div>
    <div class="abc">要素22</div>
    <div class="abc">要素33</div>
    <div class="abc">要素44</div>
    <div>要素</div>
    <div class="abc">要素55</div>
    <div>要素</div>
    <div>要素</div>
    <div>要素</div>
    <div>要素</div>
  </div>

const aaa = document.querySelector('.abc')
console.log(aaa);
if (typeof Promise === 'function') {
  aaa.style.display = 'block' 
} else {
  aaa.style.display = 'none' 
}

効いてます。

HTMLにおかしいところがあるのでは。
現時点では提示されてないので誰も確かめようがありません。

Comments

[hosodaaaaa]

回答頂きありがとうございます。
今回、バンドラーのparcelを使用して、同ページ内に設置するスライダーを実装するためにswiperをimportしており、buildした際にsyntaxerrorがIEで発生していました。

errorを追ってみると、swiperの依存である```class Dom7 {```というclass構文の記述があり、それが原因でそれ以降の処理が止まっているということが原因でした。

swiper関連の要素をコメントアウトしたところ、console.logも使用できました。

console.log()が使用できないというのは下記リンクを見たのと、処理が止まっていたことで
IEではconsole.log()が使えないんだと思ってしまいました。
https://qiita.com/moniru/items/fe470676a30adc1af518

[hosodaaaaa]

また、ieで表示切り替え判定を取るため、Promiseを使っていたもののIEでpromise関数の取得が出来ていたので、判定要素をpromiseからfetchに変更しました。

[m.ts10806]

質問にないことはこちらでくみ取ることは出来ません。追記してください。
エラーが起きればそこで中断するのがJavaScriptなので、console.log()より前に起きたら当然動きません。
使えるかどうかはそれだけが動作するプログラムを書いて単体確認しましょう。入り組んだロジックの中だけで判断は出来ません。

Answer 2

例えばですが、

const aaa = document.querySelector('.abc')
if (!true) {
  aaa.style.display = 'block' //chrome,firefox,safariでは適用されている
} else {
  aaa.style.display = 'none' //VirtualBoxのIE11では何も変わらない
}

としたときに、.abcの要素は表示されますか？

document.getElementsByClassName("abc");

で要素を取得するのはどうですか？

念のため、constではなくvarを使って宣言してみた場合はどうですか？

Comments

[hosodaaaaa]

問題なく、表示されています。

[hosodaaaaa]

document.getElementsByClassName("abc").style.display = 'none'
document.getElementsByClassName("abc").style.display = 'block'
の指定は既に試していて、こちらもIEでは表示されたままになっていました。

[okina]

varを使った変数宣言はいかがですか？

[hosodaaaaa]

遅くまでお付き合いいただき、ありがとうございます。
指摘していただいた、varもletも関係なくだめでした。。

[okina]

うーーーん、、、正直おかしいところはないと思います。

お役に立てずすいません

[m.ts10806]

>document.getElementsByClassName("abc").style.display
HTMLCollection が返ってくるのでその指定の仕方ではどのブラウザでも効きません。ループで回す必要があります。
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName