addEventListenerのクリックイベントを稼働させたい

Question

前提・実現したいこと

HTML/CSS/JavaScriptを使用してwebページの模写をしています。
表示されているディスプレイをJavaScriptのaddEventListenerのクリックイベントで、クリックされたらディスプレイを非表示にしたいのですが実行できません。

エラーメッセージの最後のindex.js:6はJavaScriptのicon.addEventListenerの行です。

発生している問題・エラーメッセージ

Uncaught TypeError: icon.addEventListener is not a function
    at index.js:6

該当のソースコード

<div id="fixed" class="close fixed">
      <p>今のところ、ギフトカードはアメリカ移住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から移住地を更新してください。</p>
      <i class="fas fa-times f-icon"></i>
    </div>

.close {
  position: static;
  display: none;
}
.fixed {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: fixed;
  background-color: rgb(179, 243, 237);
  width: 100%;
  height: 50px;
}

"use strict";

let fixed = document.getElementById("fixed");
let icon = document.getElementsByClassName("f-icon");

icon.addEventListener("click", function() {
  fixed.classList.remove("fixed");
});

試したこと

HTMLのdivタグのclass="close"を無くして、
classList.remove("fixed")をclassList.add("close")に変えてdisplayが非表示になるかも試しましたができませんでした。
他にも新しくid/classの付け替えをしましたが動きませんでした。

補足情報（FW/ツールのバージョンなど）

Atom version 1.40.1

Answer 1

javascript中の icon という変数には配列が格納されているようです。

console.log(icon)
>> HTMLCollection [ i.fas.fa-times.f-icon ]

そのため、addeventlistenerの呼び出しに失敗しています。
配列の中から一つ取り出せば成功します。

# このように、icon配列から1番目を取得
icon[0].addEventListener("click", function() {
    fixed.classList.remove("fixed");
});

これで解決するとは思います。

別解

が、f-iconが一つしか存在しないのであれば、classではなくてidで指定した方がよさそうです。
そうすると、getElementByIdで要素取得できます。その結果、配列ではなくて一つの要素が取得でき、[0]でわざわざ1番目の要素を抜き出す必要がなくなります。

Comments

[Naoki_Pro]

丁寧に回答して頂きありがとうございます。大変分かりやすかったです。
icon[0].addEventListenerとしたら上手く稼働しました。

1つ気になったのが icon[0] を試しに icon[1] にしてみたら稼働しなくなりました。
これはどういった仕様になっているのでしょうか？

[siruku6]

理解の手助けができてよかったです。

[0]の意味についてですが、プログラミングにおける配列の考え方に慣れていないと分かりにくいかもしれません。

---

getElememtByClassNameメソッドを使うと、取得対象が複数存在するという前提で要素を探しに行きます。

今回、class名がf-iconになっている要素は1つしかありませんが、複数あった場合でもよいように、見つかった要素が配列に格納されます。

配列の最初の要素には、[0]でアクセス出来るので、今回は、[0]で1つ目のf-iconにアクセスできました。

[1]は2つ目、[2]だと3つ目というように、実際の数字からひとつズレた要素にアクセスする意味を持っているのですが、今回は1つしか要素がないため、[1]では空振りしてしまいます。

というわけで、[1]だと何も起こらない(おそらくエラーが発生している)という結果になってしまいます。

上手く伝われば幸いです。

[Naoki_Pro]

分かりやすい説明ありがとうございます。
説明を読みながらエディタをいじってみたら理解できました。

丁寧でなおかつ分かりやすい説明だったのでベストアンサーにさせて頂きます。

Answer 2

getElementsByClassNameで取得したものでiconを定義しているので、
取得したものは配列になります。そのため、icon[0].addEventListenerとしてあげる必要があります。

icon[0].addEventListener("click", function() {

Document.getElementsByClassName()については、こちらで詳しく書かれています。

Comments

[Naoki_Pro]

今回は別の方をベストアンサーに選びましたが、回答して頂きありがとうございました。

Answer 3

getElementsByClassNameは HTMLCollection を返すため使い方が違います。

【getElementsByClassNameとgetElementByIdの返り値の違い - Qiita】
https://qiita.com/rindarinda5/items/c26dc81fe8cd98992dc1

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

Comments

[Naoki_Pro]

今回は別の方をベストアンサーに選びましたが、回答して頂きありがとうございました。