Javascript ==再度【カレンダー】の作成に　　

【HTMLFILE】


<div id="calendar_00">
</div>

【JavascriptFILE】

//addEventlistener および attachEvent かを 判断(関数addListener)＝＝作成
function addListener(element, event, listener) {
    //addEventlistener(InternetExplorer以外)の処理
    if (element.addEventListener) {
        element.addEventListener(event, listener, false);
        //attachEvent(InternetExplorer および其の)処理
    } else if (element.attachEvent) {
        element.attachEvent('on' + event, listener);
    } else {
        //どちらも 扱えない 場合の 処理
        throw new Error('イベントリスナに未対応です。');
    }
};
//上記 判断がら 関数を実行(div#calendar を 扱い其のelement から 
//日付のDATAオブジェクトを 要素と絡めて カレンダーを 構築
addListener(window, 'load', init);
addListener(window, 'load', calendar_00);

//init()関数 
function init() {
    var element = document.getElementById("calendar");
    //calendar の 範囲 style.backgroundColor="red" 赤色表記(確認用)  
    return element.style.backgroundColor = "red";

};

//関数koyomi()＝＝カレンダーを LOAD時 に画面に出力 
function calendar_00() {
    var calendar_00 = document.getElementById("calendar_00");

    var currentmeantime = new Date();
   
    var year = currentmeantime.getFullYear();
    var month = currentmeantime.getMonth() + 1;
    currentmeantime.setDate(1);

    var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var numOfMonth = monthDays[month - 1];

    var daysOfWeek = ['日', '月', '火', '水', '木', '金', '土'];
    
    var column;
    var i;

    if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))) {
        numOfMonth = 29;
    }
    calendar_00.innerHTML = "<table class='table_style'>";

    calendar_00.innerHTML += "<tr>";
    for (i = 0; i <= 6; i++) {

        calendar_00.innerHTML += "<th>" + daysOfWeek[i] + "</th>";

    }
    calendar_00.innerHTML += "</tr>";

    calendar_00.innerHTML += "<tr>";

    for (column = 0; column < currentmeantime.getDay() ; column++) {

        calendar_00.innerHTML += "<td></td>";

    }

    for (i = 1; i <= numOfMonth; i++) {
        calendar_00.innerHTML += "<td>" + i + "</td>";
        if (column == 6) {

            calendar_00.innerHTML += "</tr>";

            column = 0;
            if (!(i == numOfMonth)) {

                calendar_00.innerHTML += "<tr>";

            }
        } else {
            column++;
        }
    }

    calendar_00.innerHTML += "</table>";

    return calendar_00;
};

【質問内容】

【再度】==質問です。この前の  回答文の記述に
纏め  CODINGを試みたのですが  
どうしても 出力為 なぃ  ので(BROWSERに)反映を 其れが  
何故なのか 記載ミスなのか其れとも【根本的に】  違うのか  
参考書等  何冊かを確かめながら
ERRORと MISS  の  発見を試みているのですが  
困ってます(´；ω；`)ｳｩｩ相当  時間を  奪われ    
  ぼくは瀕死です
助言を  もし御抵抗が無いので   あれば 
ヒント  および こたえを＝＝わたくしに  下さい(´；ω；`)ｳｩ｜非常口｜ｩ

kei344

2017/01/13 12:06

「何」が「どのように」わからないのか、どのコードで詰まっているのかなどを追記されたほうが回答が望めると思います。

toutou

2017/01/13 12:30

文章は普通にかけないのでしょうか？わざわざ小文字のぃとか使わずに書いた方が、見るほうも書く方も楽だと思います。漢字を使った方がいいです。行間なども読みにくい。

learner-crow

2017/01/13 13:00 編集

違和感が　在り　コメント　　を打ち込む時に可能な限り　　失礼の無い様に心掛けます。

learner-crow

2017/01/13 13:06 編集

注意　　および文法ERRORと御指摘を受け賜わり　　有難う御座います。　　I　THINK ......

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

回答1件

ベストアンサー

つっこみどころ満載ですが、とりあえず無駄なコードを減らしてみて
ロジックを追えるようにして、修正してみました。

問題はタグの親子構造が完成していないのに
innerHTMLに直接文字列で加えていたので
動かなかっただけです。
全部文字列でHTMLを作成してから
innerHTMLにセットすると良いです。

HTMLは文字列で作成すると開きタグと閉じタグの対応がおかしくなりしやすいので、
DOMの要素単位で作成して、親子関係を作るべきだと思います。

↓こちらの方の記事を見てとりあえず回答してみました。
カレンダー生成スクリプトを書いてみた - Qiita

↓Reactを使ってカレンダーを書いてみました。ご参考まで。
React v15でカレンダーを作ってみた - Qiita

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<!-- https://teratail.com/questions/61908 -->
4	<!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 -->
5	<head>
6		<meta charset="UTF-8">
7		<title></title>
8		<style type="text/css">
9		html { font-family: 'ＭＳ Ｐゴシック'; font-size: 1.5em; }
10		td { text-align: center; }
11		.table_style { background-color: #ddffff; }
12		thead { background-color: #ccffcc; }
13		</style>
14	</head>
15	<body>
16		<div id="$calendar"></div>
17		<script type="text/javascript">
18
19//addEventlistener および attachEvent かを 判断(関数addListener)＝＝作成
20function addListener(element, event, listener) {
21	if (element.addEventListener)
22		element.addEventListener(event, listener, false);
23	else if (element.attachEvent)
24		element.attachEvent('on' + event, listener);
25	else
26		throw new Error('イベントリスナに未対応です。');
27};
28//上記 判断がら 関数を実行(div#calendar を 扱い其のelement から 
29//日付のDATAオブジェクトを 要素と絡めて カレンダーを 構築
30addListener(window, 'load', calendar_00);
31
32//関数koyomi()＝＝カレンダーを LOAD時 に画面に出力 
33function calendar_00() {
34	var currentmeantime = new Date(2017, 1, 1);
35
36	var year = currentmeantime.getFullYear();
37	var month = currentmeantime.getMonth() + 1;
38	currentmeantime.setDate(1);
39
40	var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
41	var numOfMonth = monthDays[month - 1];
42
43	var daysOfWeek = ['日', '月', '火', '水', '木', '金', '土'];
44
45	var column;
46
47	if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)))
48		numOfMonth = 29;
49
50	var str = '<table class="table_style">';
51
52	str += '<thead>';
53	str += '<tr>';
54	for (var i = 0; i <= 6; i++)
55		str += '<th>' + daysOfWeek[i] + '</th>';
56	str += '</tr>';
57	str += '</thead>';
58
59	str += '<tbody>';
60	str += '<tr>';
61	for (column = 0; column < currentmeantime.getDay() ; column++)
62		str += '<td></td>';
63
64	for (var i = 1; i <= numOfMonth; i++) {
65		str += '<td>' + i + '</td>';
66		if (column == 6) {
67			str += '</tr>';
68			column = 0;
69			if (!(i == numOfMonth))
70				str += '<tr>';
71		} else
72			column++;
73	}
74	str += '</tbody>';
75	str += '</table>';
76	$calendar.innerHTML = str;
77};
78
79		</script>
80	</body>
81</html>

投稿2017/01/13 22:39

編集2017/01/17 20:00

LightSpeedC

総合スコア26

learner-crow

2017/01/30 13:41

有難う御座います。問題はXML==XHTML　　を無理に扱おうと　　其の　　「＆などのパースエラー」が妨げとなって居りました。。HTML5をあつかうと＝＝さらに　　データの不整合および　　　　他のブラウザーでの　　ずれが＝＝へりましたさらにLiteSpeedC　　さまの回答文で僕じしん　　より　　解答(javascriptの)がよりふかまります。。このたびはお忙しい中解答に付き合っていただき　　　　ありがとうござぃまづ

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