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

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

ただいまの
回答率

89.62%

Javascriptにおいて、関数内での関数を実行させるには。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 733

Shinog

score 110

はじめまして。

現在、以下の記事を参考にしてカレンダーを作っているのですが、
JSONから取り出した情報(日付)の日のみ色を変える機能を実装しようと考えており、コードを変更したものの色が全く変わりません。

自分なりに考えてみたところ、関数内で関数を実行することが原因だと考えているのですが、具体的にどう対処すればいのかわかりません。

何かお分かりの方は是非ともご教授のほどよろしくお願いします。

http://www.allinthemind.biz/markup/javascript/calendar.html

<div id="calendar"></div>  //カレンダーの表示部分
<p><a href="#" id="month_prev_ajax">前月へ</a>/ <a href="#" id="month_next_ajax">次月へ</a></p>   //月の移動ボタン

<script type="text/javascript">
// 取得したい年・月設定
var y,m;
var p = location.search;

    y = new Date().getFullYear();
    m = new Date().getMonth()+1;

function calendar(y,m){
    
    // 初期設定    
    var feb_date = (y%4 == 0 && y%100 != 0)?29:28;
    if(y%400 == 0){feb_date = 29};
    var month_count = {1:31,2:feb_date,3:31,4:30,5:31,6:30,7:31,8:31,9:30,10:31,11:30,12:31}
    var day_en = {d0:"sun",d1:"mon",d2:"the",d3:"wed",d4:"thu",d5:"fri",d6:"sat"};
    var m_display = (m<10)?"0"+String(m):m;    
    var last_day = new Date(y,m-1,month_count[m]).getDay();
    var first_day = new Date(y,m-1,1).getDay();
    var w = 1;
    var d = first_day;
    
    // マークアップ生成
    var txt = "";
    txt += '<h1>' + y + '年' + m + '月のカレンダー</h1>\n';
    txt += '<table summary="' + y + '年' + m_display + '月のカレンダー" class="calendar month' + m + '">\n';
    txt += '<tr>\n';
    txt += '<th>SUN</th>\n';
    txt += '<th>MON</th>\n';
    txt += '<th>TUE</th>\n';
    txt += '<th>WED</th>\n';
    txt += '<th>THU</th>\n';
    txt += '<th>FRI</th>\n';
    txt += '<th>SAT</th>\n';
    txt += '</tr>\n';
    txt += '<tr class="week1">\n';
    for(var j=0;j<first_day;j++){
        txt += '<td>&nbsp;</td>\n';
    }
    for(var i=1;i<=month_count[m];i++){
        if(d != 0 && (first_day + i)%7 == 1){
            w++;
            d = 0;
            txt += '</tr>\n';    
            txt += '<tr class="week' + w + '">\n';
        }
        var i_display = (i<10)?"0"+String(i):i;
        
        day_count = (i%7 == 0)? Math.floor(i/7) : Math.floor(i/7) + 1 ;
        
        //ここから記事の中身を変更します
        var cleared = false;  //日付がJSONに格納されているか把握するためにフラグを立てます
        
        $.getJSON("data2.json", function(data){
        $(data).each(function(){
            var date = this.Date.date;
            var limit = this.Date.limitt;
            
        var ydate = date.slice(0, 4);  //日付から年のみ抽出
        var mdate = date.slice(5, 7);  //日付から月のみ抽出
        var ddate = date.slice(8, 10);  //日付から日のみ抽出
        
        
        if(y == ydate && m == mdate && i_display == ddate){
        txt += '<td id="d' + y + m_display + i_display + '" class="'  + 'check' +  '">' + i + '</td>\n';
        cleared = true;  //もし日付が一致すればtdのクラスをcheckに変更し、フラグをtrueにする(checkクラスにcssで色を付けています)
        }
            
        })
    })
        
        if (!cleared) {  //もしフラグがtrueでなければ色付けされていないtdへ
        txt += '<td id="d' + y + m_display + i_display + '" class="' + day_en['d'+d] + day_count + ' date' + i + '">' + i + '</td>\n';
        }
        //ここまで
        
        d++;
    }
    for(var j=0;j<(6-last_day);j++){
        txt += '<td>&nbsp;</td>\n';
    }
    txt += '</tr>\n';
    txt += '</table>\n';
    
    // 書き出し
    document.getElementById("calendar").innerHTML = txt;
}

//以降月を変えるためのコード
window.onload = function(){
    calendar(y,m);
    
    
    document.getElementById("month_prev_ajax").onclick = function(){  //前月へボタンを押された時
        m--;
        if(m==0){y--;m=12;}
        calendar(y,m);
        return false;
    }
    
    document.getElementById("month_next_ajax").onclick = function(){  //次月へボタンを押された時
        m++;
        if(m==13){y++;m=1;}
        calendar(y,m);
        return false;
    }
    
        
}

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 2

checkベストアンサー

0

data2.jsonの内容を記載して頂けますか。

あと下の比較ですが、mって最初のm = new Date().getMonth()+1;ですよね。
1~9月の時は1桁で出るのでfalseになると思います。
(これだけが原因ではないと思いますが)

if(y == ydate && m == mdate && i_display == ddate){
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/10/08 23:15 編集

    ご回答ありがとうございます。
    このコードとは別に、JSONではないオブジェクト(ただし日付の形式は同じ)をfor...inでループさせた時は正常に作動(日付に色が付く)したので、桁数の問題ではないかと思っております。

    キャンセル

  • 2015/10/08 23:17 編集

    /

    キャンセル

  • 2015/10/08 23:41

    $.ajaxSetup({ async: false });
    $.getJSON("data2.json", function(data){

    としていただけますでしょうか。
    こちらではこれで出来ました。Ajaxが非同期で実行されるためi_displayが常に31になっていました

    キャンセル

  • 2015/10/09 18:00

    ありがとうございます!
    $.ajaxSetup({ async: false });
    を追加することで無事解決致しました。

    キャンセル

0

1. 
$.getJSON()はjQueryのメソッドかと思います。他の部分ではjQuery使ってないようですが、読み込んでいますでしょうか?(読み込んで無ければエラーになってカレンダー完成しないと思いますが…)

2.
次に、$.getJSON()初期設定では非同期だったかと思います。参考リンク
その場合、画面に表示が終わった後に、中の処理が動いているという可能性もあります。
(というか非同期だとtxtは別スコープの変数になってそうですね。)

既に対策済みかも知れませんが、
ちょっと見た感じで他に動かない原因になりそうなものは気がつきませんでしたので一応

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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