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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1574閲覧

JavaScript addEventListener がうまく動作しない

kurubusi1

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/09/08 12:44

前提・実現したいこと

業務未経験初心者です。
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特になし

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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});

とする必要があります。

投稿2020/09/08 13:09

thyda.eiqau

総合スコア2982

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問