JavaScriptでクリックした時に別要素を消す

Question

ボタンをクリックした時に別の要素を削除したい
CSSで指定した.noneをJavaScriptを用いて付与することで要素を削除しようと思っています。

しかし結果は上手く動作せず、クリックしても画面上、何の変化もありませんでした。inputのボタンを使用せずに上手く動作させるにはどのようにすればいいでしょうか。

<div id= "btn">Button</div>
<div id= "display">これを消す</div>

.none{
    display: none;
}

document.getElementById('btn').onclick = function() {
 
   document.getElementById('display').classList.add('none');
}

onclickの部分が間違っているのか、クラスを付与する部分が間違っているのか様々なソースコードを調べ、試したのですが、結局上記のようなコードになり、失敗しました。よろしければご教授お願いいたします。

Answer 1

動くサンプル：https://jsfiddle.net/vc3w1rLt/

---

提示されたコードで動きます。なので、考えられることは下記のような可能性です。
0. スクリプト要素の位置がhead要素の中で、なおかつHTMLのロードを待つ記述が無い可能性
0. スクリプトが（パスが違うなど）呼び出しに失敗して実行されていない
0. 編集しているファイルが確認しているファイルと違う

1の場合、</body>直前に<script >の記述を持ってくると解決します。

Comments

[masa_mf3]

kei344さん、ありがとうございます！
記述場所やパスを再度確認したところ、思うような節は見当たりませんでした。
以下のCodePenでも試したところ、これも上手く動作しませんでした。CodePenはどこが間違えているでしょうか。ご教授いただけたら幸いです????????
https://codepen.io/masa_mf3rs/pen/oNvLXXm

[kei344]

docment ⇒ document

[kei344]

【ChromeのデベロッパーツールでJSをデバッグする方法（2019年版） - ICS MEDIA】
https://ics.media/entry/190517/

[masa_mf3]

ありがとうございます！解決しました。JSのデバッグも今からもう一度勉強しようと思います????????????

Answer 2

Before

<div id= "btn">Button</div>
<div id= "display">これを消す</div>

After

<div id="btn">Button</div>
<div id="display">これを消す</div>

idの直後に空白文字が入っています。
消してみてください。

Comments

[masa_mf3]

asuchi0819さん、ありがとうございます！

[kei344]

仕様上特に問題が無いようです。

【HTML Standard 日本語訳】
https://momdo.github.io/html/syntax.html#attributes-2
> 0個以上のASCII空白文字が続き、1つのU+003D EQUALS SIGN文字が続き、0個以上のASCII空白文字が続き、
【HTML Standard】
https://html.spec.whatwg.org/multipage/syntax.html#attributes-2

[masa_mf3]

kei344さん再度ありがとうございます。見やすさのために、あの場所に空欄をあけても大丈夫ですね！

[kyoya0819]

確かに 失礼しました。
いつも"をつけないでclass,id指定しているので忘れていました。