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

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

ただいまの
回答率

87.61%

javascript スケジュール帳作製

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,526

score 17

スケジュールアプリを試作しています。
javascriptでカレンダーを作製しましたが、クリックアクションでマス目の色が変えれません。
日付をクリックした際にテキスト欄に日付が反映され、同時に日付のbackgroundの色も変えたいと考えています。

$(ここ).css('background-color','yellow') 該当する日付(td)の入力の仕方がわかりません。

どなたかご教授よろしくお願いいたします。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Share-schedule</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
        <h1>スケジュール共有</h1>
    </header>

    <button class="btn" id="prev" type="button">前の月</button>
    <button class="btn" id="next" type="button">次の月</button>

    <div id="calendar"></div>
    <a>name:<input id='name' type='text'></a>
    <textarea name='' id='text' cols='100' rows='2'></textarea>
    <button class="send" id='send'>登録</button>
    <div id="schedule" class="schedule"></div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script>

        //カレンダーの作成


        const weeks = ['日', '月', '火', '水', '木', '金', '土']    
        const date = new Date()           
        let year = date.getFullYear()     
        let month = date.getMonth() + 1    
        const config = {                  
            show: 3,                       
        }

        function showCalendar(year, month) {      
            for (i = 0; i < config.show; i++) { 
                const calendarHtml = createCalendar(year, month)
                const sec = document.createElement('section')   
                sec.innerHTML = calendarHtml         
                document.querySelector('#calendar').appendChild(sec)  

                month++       
                if (month > 12) {  
                    year++         
                    month = 1      
                }
            }
        }

        //関数:createCalendar は,カレンダーを作成する流れ

        function createCalendar(year, month) {
            const startDate = new Date(year, month - 1, 1) 
            const endDate = new Date(year, month, 0) 
            const endDayCount = endDate.getDate() 
            const lastMonthEndDate = new Date(year, month - 2, 0) 
            const lastMonthendDayCount = lastMonthEndDate.getDate() 
            const startDay = startDate.getDay() 
            let dayCount = 1 
            let calendarHtml = '' 

            calendarHtml += '<h1>' + year + '/' + month + '</h1>' 
            calendarHtml += '<table>'  

            // 曜日の行を作成
            for (let i = 0; i < weeks.length; i++) {   
                calendarHtml += '<td>' + weeks[i] + '</td>'  
            }

            for (let w = 0; w < 6; w++) {   
                calendarHtml += '<tr>'    

                for (let d = 0; d < 7; d++) {  
                    if (w == 0 && d < startDay) {    
                        let num = lastMonthendDayCount - startDay + d + 1   
                        calendarHtml += '<td class="is-disabled">' + num + '</td>'  
                    } else if (dayCount > endDayCount) {   
                        let num = dayCount - endDayCount  
                        calendarHtml += '<td class="is-disabled">' + num + '</td>' 
                        dayCount++   
                    } else {   
                        calendarHtml += `<td class="calendar_td" data-date="${year}/${month}/${dayCount}">${dayCount}</td>`// ?
                        dayCount++   
                    }
                }
                calendarHtml += '</tr>' 
            }
            calendarHtml += '</table>'  

            return calendarHtml
        }

        //関数:moveCalendar 

        function moveCalendar(e) {
            document.querySelector('#calendar').innerHTML = ''   //

            if (e.target.id === 'prev') {  

                if (month < 1) {   
                    year--          
                    month = 12    
                }
            }

            if (e.target.id === 'next') {    
                month++  


                if (month > 12) { 
                    year++      
                    month = 1  
                }
            }

            showCalendar(year, month)
        }

        document.querySelector('#prev').addEventListener('click', moveCalendar)  
        document.querySelector('#next').addEventListener('click', moveCalendar)

        //クリックした時の動き

        document.addEventListener("click", function (e) {
            if (e.target.classList.contains("calendar_td")) {
                $('#text').text(e.target.dataset.date + ' :  ')  //クリックした日付をmemo欄として出力

                // $().css('background-color', 'yellow') //ここがわからない箇所です
            }
        })
        showCalendar(year, month)



    </script>




</body>

</html>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/09/03 09:39

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

    キャンセル

回答 2

checkベストアンサー

+1

$(function(){
    $(document).on('click','td.calendar_td',function(){
        $('td.calendar_td').css('background-color','');//背景色リセット
        $('#text').text($(this).data('date') + ' :  ');
        $(this).css('background-color','yellow');
    });
});

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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/09/03 09:52

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

    キャンセル

  • 2019/09/03 09:54

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

    キャンセル

  • 2019/09/03 20:42

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

    キャンセル

0

ヒントです。

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

<span onclick=func(1);>1日</span>
<span onclick=func(2);>2日</span>
function func(aiueo) {
  document.write(aiueo);
}


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

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/09/03 09:51

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

    キャンセル

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

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

関連した質問

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