javascript　スケジュール帳作製

スケジュールアプリを試作しています。
javascriptでカレンダーを作製しましたが、クリックアクションでマス目の色が変えれません。
日付をクリックした際にテキスト欄に日付が反映され、同時に日付のbackgroundの色も変えたいと考えています。
##$(ここ).css('background-color','yellow')　該当する日付(td)の入力の仕方がわかりません。
どなたかご教授よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <meta http-equiv="X-UA-Compatible" content="ie=edge">
8    <title>Share-schedule</title>
9    <link rel="stylesheet" href="css/style.css">
10</head>
11
12<body>
13    <header>
14        <h1>スケジュール共有</h1>
15    </header>
16
17    <button class="btn" id="prev" type="button">前の月</button>
18    <button class="btn" id="next" type="button">次の月</button>
19  
20    <div id="calendar"></div>
21    <a>name:<input id='name' type='text'></a>
22    <textarea name='' id='text' cols='100' rows='2'></textarea>
23    <button class="send" id='send'>登録</button>
24    <div id="schedule" class="schedule"></div>
25    </div>
26
27    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
28
29    <script>
30
31        //カレンダーの作成
32
33
34        const weeks = ['日', '月', '火', '水', '木', '金', '土']    
35        const date = new Date()           
36        let year = date.getFullYear()     
37        let month = date.getMonth() + 1    
38        const config = {                  
39            show: 3,                       
40        }
41
42        function showCalendar(year, month) {      
43            for (i = 0; i < config.show; i++) { 
44                const calendarHtml = createCalendar(year, month)
45                const sec = document.createElement('section')   
46                sec.innerHTML = calendarHtml         
47                document.querySelector('#calendar').appendChild(sec)  
48
49                month++       
50                if (month > 12) {  
51                    year++         
52                    month = 1      
53                }
54            }
55        }
56
57        //関数：createCalendar は,カレンダーを作成する流れ
58
59        function createCalendar(year, month) {
60            const startDate = new Date(year, month - 1, 1) 
61            const endDate = new Date(year, month, 0) 
62            const endDayCount = endDate.getDate() 
63            const lastMonthEndDate = new Date(year, month - 2, 0) 
64            const lastMonthendDayCount = lastMonthEndDate.getDate() 
65            const startDay = startDate.getDay() 
66            let dayCount = 1 
67            let calendarHtml = '' 
68
69            calendarHtml += '<h1>' + year + '/' + month + '</h1>' 
70            calendarHtml += '<table>'  
71
72            // 曜日の行を作成
73            for (let i = 0; i < weeks.length; i++) {   
74                calendarHtml += '<td>' + weeks[i] + '</td>'  
75            }
76
77            for (let w = 0; w < 6; w++) {   
78                calendarHtml += '<tr>'    
79
80                for (let d = 0; d < 7; d++) {  
81                    if (w == 0 && d < startDay) {    
82                        let num = lastMonthendDayCount - startDay + d + 1   
83                        calendarHtml += '<td class="is-disabled">' + num + '</td>'  
84                    } else if (dayCount > endDayCount) {   
85                        let num = dayCount - endDayCount  
86                        calendarHtml += '<td class="is-disabled">' + num + '</td>' 
87                        dayCount++   
88                    } else {   
89                        calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`// ?
90                        dayCount++   
91                    }
92                }
93                calendarHtml += '</tr>' 
94            }
95            calendarHtml += '</table>'  
96
97            return calendarHtml
98        }
99
100        //関数：moveCalendar 
101
102        function moveCalendar(e) {
103            document.querySelector('#calendar').innerHTML = ''   //
104
105            if (e.target.id === 'prev') {  
106
107                if (month < 1) {   
108                    year--          
109                    month = 12    
110                }
111            }
112
113            if (e.target.id === 'next') {    
114                month++  
115
116
117                if (month > 12) { 
118                    year++      
119                    month = 1  
120                }
121            }
122
123            showCalendar(year, month)
124        }
125
126        document.querySelector('#prev').addEventListener('click', moveCalendar)  
127        document.querySelector('#next').addEventListener('click', moveCalendar)
128
129        //クリックした時の動き
130
131        document.addEventListener("click", function (e) {
132            if (e.target.classList.contains("calendar_td")) {
133                $('#text').text(e.target.dataset.date + ' :  ')  //クリックした日付をmemo欄として出力
134
135                // $().css('background-color', 'yellow') //ここがわからない箇所です
136            }
137        })
138        showCalendar(year, month)
139
140        
141
142    </script>
143
144
145
146
147</body>
148
149</html>

m.ts10806

2019/09/03 00:39

htmlが一部正しくない箇所があります（</div>が多いっぽい）あとjQueryを読み込んでおきながらほとんどjQueryの記述を使われていません。使うならしっかり使う、使わないなら全く使わない　ようにしたほうがコードも見やすくなると思います。

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

回答2件

ベストアンサー

js
1$(function(){
2	$(document).on('click','td.calendar_td',function(){
3		$('td.calendar_td').css('background-color','');//背景色リセット
4		$('#text').text($(this).data('date') + ' :  ');
5		$(this).css('background-color','yellow');
6	});
7});
8

別途コメントでも書きましたが、
jQueryを読み込ませるなら一通りjQueryの記法で統一したほうが良いです。

投稿2019/09/03 00:46

m.ts10806

総合スコア80850

ysk_m

2019/09/03 00:52

ありがとうございます！ご指摘までいただき感謝します。もっと勉強します。色変わりました！感動的です。ありがとうございます。

m.ts10806

2019/09/03 00:54

どっちつかずは無駄なリソースとなります。 jQueryはそれなりにサイズのあるファイルなので使うならとことん使い、使わないならそもそも導入しないようにしてくださいね。

ysk_m

2019/09/03 11:42

そうします！ありがとうございました。

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

ヒントです。

とりあえず思いついたのはこれ
もっといい方法あるかも

HTML
1<span onclick=func(1);>1日</span>
2<span onclick=func(2);>2日</span>

JAVASCRIPT
1function func(aiueo) {
2  document.write(aiueo);
3}

色々変えてから使ってください。

投稿2019/09/02 22:53

kyoya0819

総合スコア10429

ysk_m

2019/09/03 00:51

ありがとうございます！参考にさせていただきます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

javascript　スケジュール帳作製

関連した質問