javascript style.displayが反映されない

javascript style.displayが反映されない

javascriptでstyle.displayが反映されない場合の対処法を記述してます。

環境

  • OS windows10 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 98.0.4758.102

ソースコード

以下のコードで、発生しました。

<p id="test">要素</p>
<button id="btn">button</button>

<script>
    btn.onclick = function () {
        document.getElementById("test").style.disiplay = "none"
    }
</script>

実行結果

コンソールにもエラーがでなく、またvscodeでも警告が表示されない

原因

「display」が「disiplay」となっているため。ただの、ミスでした。

対処法

「display」に変更すれば、当然動きます。

btn.onclick = function(){
  document.getElementById("test").style.display = "none"  
}

例えば「function」の綴りが間違っていると、以下のように問題となり、それに慣れていたのでなかなか気がつくことができませんでした。