JavaScript　addEventListener がうまく動作しない

前提・実現したいこと

業務未経験初心者です。
javascript1にてカレンダーにスケジュールを入れられるアプリを作成しております。

カレンダーにて日付が入っている
箇所をクリックすることで
ウィザードを表示し、スケジュールを入力するといった機能をもたせたいので
下記コードにてクリックイベントを追加しているんですが、うまく動作しません。
解消方法、うまくいかない原因についてご教示いただけますでしょうか。

  const clickDate = document.getElementsByClassName('date-picker');

  clickDate.addEventListener('click' , () => {
          console.log('クリックされました！');
    });

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

Uncaught TypeError: clickDate.addEventListener is not a function
    at calendar.js:108

該当のソースコード

JavaScript
1function generate_year_range(start, end) {
2    var years = "";
3    for (var year = start; year <= end; year++) {
4        years += "<option value='" + year + "'>" + year + "</option>";
5    }
6    return years;
7  }
8  
9  var today = new Date();
10  var currentMonth = today.getMonth();
11  var currentYear = today.getFullYear();
12  var selectYear = document.getElementById("year");
13  var selectMonth = document.getElementById("month");
14  
15  var createYear = generate_year_range(1970, 2200);
16  
17  document.getElementById("year").innerHTML = createYear;
18  
19  var calendar = document.getElementById("calendar");
20  var lang = calendar.getAttribute('data-lang');
21  
22  var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
23  var days = ["日", "月", "火", "水", "木", "金", "土"];
24  
25  var dayHeader = "<tr>";
26  for (day in days) {
27    dayHeader += "<th data-days='" + days[day] + "'>" + days[day] + "</th>";
28  }
29  dayHeader += "</tr>";
30  
31  document.getElementById("thead-month").innerHTML = dayHeader;
32  
33  monthAndYear = document.getElementById("monthAndYear");
34  showCalendar(currentMonth, currentYear);
35  
36  function next() {
37    currentYear = (currentMonth === 11) ? currentYear + 1 : currentYear;
38    currentMonth = (currentMonth + 1) % 12;
39    showCalendar(currentMonth, currentYear);
40  }
41  
42  function previous() {
43    currentYear = (currentMonth === 0) ? currentYear - 1 : currentYear;
44    currentMonth = (currentMonth === 0) ? 11 : currentMonth - 1;
45    showCalendar(currentMonth, currentYear);
46  }
47  
48  function jump() {
49    currentYear = parseInt(selectYear.value);
50    currentMonth = parseInt(selectMonth.value);
51    showCalendar(currentMonth, currentYear);
52  }
53  
54  function showCalendar(month, year) {
55  
56    var firstDay = ( new Date( year, month ) ).getDay();
57  
58    tbl = document.getElementById("calendar-body");
59  
60    tbl.innerHTML = "";
61  
62    monthAndYear.innerHTML = months[month] + " " + year;
63    selectYear.value = year;
64    selectMonth.value = month;
65  
66    // creating all cells
67    var date = 1;
68    for ( var i = 0; i < 6; i++ ) {
69        var row = document.createElement("tr");
70  
71        for ( var j = 0; j < 7; j++ ) {
72            if ( i === 0 && j < firstDay ) {
73                cell = document.createElement( "td" );
74                cellText = document.createTextNode("");
75                cell.appendChild(cellText);
76                row.appendChild(cell);
77            } else if (date > daysInMonth(month, year)) {
78                break;
79            } else {
80                cell = document.createElement("td");
81                cell.setAttribute("data-date", date);
82                cell.setAttribute("data-month", month + 1);
83                cell.setAttribute("data-year", year);
84                cell.setAttribute("data-month_name", months[month]);
85                cell.className = "date-picker";
86                cell.innerHTML = "<span>" + date + "</span>";
87                
88  
89                if ( date === today.getDate() && year === today.getFullYear() && month === today.getMonth() ) {
90                    cell.className = "date-picker selected";
91                }
92                row.appendChild(cell);
93                date++;
94            }
95        }
96  
97        tbl.appendChild(row);
98    }
99  
100  }
101  
102  function daysInMonth(iMonth, iYear) {
103    return 32 - new Date(iYear, iMonth, 32).getDate();
104  }
105
106  const clickDate = document.getElementsByClassName('date-picker');
107
108  clickDate.addEventListener('click' , () => {
109          console.log('クリックされました！');
110    });
111

HTML
1<!doctype html>
2<html class="no-js" lang="">
3
4<head>
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9
10  <meta property="og:title" content="">
11  <meta property="og:type" content="">
12  <meta property="og:url" content="">
13  <meta property="og:image" content="">
14
15  <link rel="manifest" href="site.webmanifest">
16  <link rel="apple-touch-icon" href="icon.png">
17  <!-- Place favicon.ico in the root directory -->
18
19  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
20  <link rel="stylesheet" href="css/calendar.css">
21
22  <meta name="theme-color" content="#fafafa">
23</head>
24
25<body>
26  <div class="alert alert-primary" role="alert">
27    A simple primary alert—check it out!
28  </div>
29  <div class="container-calendar">
30    <h4 id="monthAndYear"></h4>
31    <div class="button-container-calendar">
32        <button id="previous" onclick="previous()">‹</button>
33        <button id="next" onclick="next()">›</button>
34    </div>
35    
36    <table class="table-calendar" id="calendar" data-lang="ja">
37        <thead id="thead-month"></thead>
38        <tbody id="calendar-body"></tbody>
39    </table>
40    
41    <div class="footer-container-calendar">
42        <label for="month">日付指定：</label>
43        <select id="month" onchange="jump()">
44            <option value=0>1月</option>
45            <option value=1>2月</option>
46            <option value=2>3月</option>
47            <option value=3>4月</option>
48            <option value=4>5月</option>
49            <option value=5>6月</option>
50            <option value=6>7月</option>
51            <option value=7>8月</option>
52            <option value=8>9月</option>
53            <option value=9>10月</option>
54            <option value=10>11月</option>
55            <option value=11>12月</option>
56        </select>
57        <select id="year" onchange="jump()"></select>
58    </div>
59  </div>
60
61
62  <!-- 選択プルダウンメニュー -->
63  <script src="main.js"></script>
64
65  <!-- カレンダーJSファイル -->
66  <script src="js/calendar.js" type="text/javascript"></script>
67
68  
69
70
71</body>
72
73</html>
74

試したこと

クリックイベント追加コマンド自体はまちがっていない(他で動作したので)ことはわかりますが
js上で定義している
date-pickerクラスを持ってることができていないから、エラーが起きてしまうんですかね。。。
理解できてなく申し訳ないです。

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

VScodeをしようしております。FW特になし

行動規範の内容に同意します

回答1件

ベストアンサー

getElement s ByClassName() が示すとおり、このメソッドは指定したクラスを持つすべての要素を返します。

js
1const clickDate = document.getElementsByClassName('date-picker');

このコードでは、 clickDate には配列のようなオブジェクトが格納されています。配列のようなオブジェクトの中身はHTML要素です。
addEventListener() は、この中身であるHTML要素が持つメソッドです。

clickDate[0] などのように、配列と同じように配列のようなオブジェクトの中身にアクセスできます。したがって

js
1const clickDates = document.getElementsByClassName('date-picker');
2
3clickDates[0].addEventListener('click' , () => {
4  console.log('クリックされました！');
5});

とするか、

js
1const clickDate = document.getElementsByClassName('date-picker')[0];
2
3clickDate.addEventListener('click' , () => {
4  console.log('クリックされました！');
5});