質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.38%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 668

score 23

前提・実現したいこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+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番目の要素を抜き出す必要がなくなります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/22 13:35

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

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

    キャンセル

  • 2019/09/22 17:25 編集

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

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

    ---

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

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

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

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

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

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

    キャンセル

  • 2019/09/22 19:23

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

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/22 19:27

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

    キャンセル

+1

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

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/22 19:26

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る