回答編集履歴

2 参考URLを追加

LightSpeedC

LightSpeedC score 24

2017/01/18 05:00  投稿

つっこみどころ満載ですが、とりあえず無駄なコードを減らしてみて
ロジックを追えるようにして、修正してみました。
問題はタグの親子構造が完成していないのに
innerHTMLに直接文字列で加えていたので
動かなかっただけです。
全部文字列でHTMLを作成してから
innerHTMLにセットすると良いです。
HTMLは文字列で作成すると開きタグと閉じタグの対応がおかしくなりしやすいので、
DOMの要素単位で作成して、親子関係を作るべきだと思います。
↓こちらの方の記事を見てとりあえず回答してみました。
[カレンダー生成スクリプトを書いてみた - Qiita](http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67)
 
↓Reactを使ってカレンダーを書いてみました。ご参考まで。  
[React v15でカレンダーを作ってみた - Qiita](http://qiita.com/LightSpeedC/items/8679c9d4069523b737ea)  
```html
<!DOCTYPE HTML>
<html lang="ja">
   <!-- https://teratail.com/questions/61908 -->
   <!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 -->
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
       html { font-family: 'MS Pゴシック'; font-size: 1.5em; }
       td { text-align: center; }
       .table_style { background-color: #ddffff; }
       thead { background-color: #ccffcc; }
       </style>
   </head>
   <body>
       <div id="$calendar"></div>
       <script type="text/javascript">
//addEventlistener および attachEvent かを 判断(関数addListener)==作成
function addListener(element, event, listener) {
   if (element.addEventListener)
       element.addEventListener(event, listener, false);
   else if (element.attachEvent)
       element.attachEvent('on' + event, listener);
   else
       throw new Error('イベントリスナに未対応です。');
};
//上記 判断がら 関数を実行(div#calendar を 扱い其のelement から
//日付のDATAオブジェクトを 要素と絡めて カレンダーを 構築
addListener(window, 'load', calendar_00);
//関数koyomi()==カレンダーを LOAD時 に画面に出力
function calendar_00() {
   var currentmeantime = new Date(2017, 1, 1);
   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;
   if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)))
       numOfMonth = 29;
   var str = '<table class="table_style">';
   str += '<thead>';
   str += '<tr>';
   for (var i = 0; i <= 6; i++)
       str += '<th>' + daysOfWeek[i] + '</th>';
   str += '</tr>';
   str += '</thead>';
   str += '<tbody>';
   str += '<tr>';
   for (column = 0; column < currentmeantime.getDay() ; column++)
       str += '<td></td>';
   for (var i = 1; i <= numOfMonth; i++) {
       str += '<td>' + i + '</td>';
       if (column == 6) {
           str += '</tr>';
           column = 0;
           if (!(i == numOfMonth))
               str += '<tr>';
       } else
           column++;
   }
   str += '</tbody>';
   str += '</table>';
   $calendar.innerHTML = str;
};
       </script>
   </body>
</html>
```
1 HTML構文のクォートをダブルクォートに、JavaScript構文のクォートはシングルクォートに変更

LightSpeedC

LightSpeedC score 24

2017/01/14 15:22  投稿

つっこみどころ満載ですが、とりあえず無駄なコードを減らしてみて
ロジックを追えるようにして、修正してみました。
問題はタグの親子構造が完成していないのに
innerHTMLに直接文字列で加えていたので
動かなかっただけです。
全部文字列でHTMLを作成してから
innerHTMLにセットすると良いです。
HTMLは文字列で作成すると開きタグと閉じタグの対応がおかしくなりしやすいので、
DOMの要素単位で作成して、親子関係を作るべきだと思います。
↓こちらの方の記事を見てとりあえず回答してみました。
[カレンダー生成スクリプトを書いてみた - Qiita](http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67)
```html
<!DOCTYPE HTML>
<html lang='ja'>
<html lang="ja">
   <!-- https://teratail.com/questions/61908 -->
   <!-- 参考 http://qiita.com/ShibuyaKosuke/items/8c47ae51195ddc42ce67 -->
   <head>
       <meta charset='UTF-8'>
       <meta charset="UTF-8">
       <title></title>
       <style type='text/css'>
       <style type="text/css">
       html { font-family: 'MS Pゴシック'; font-size: 1.5em; }
       td { text-align: center; }
       .table_style { background-color: #ddffff; }
       thead { background-color: #ccffcc; }
       </style>
   </head>
   <body>
       <div id="$calendar"></div>
       <script type="text/javascript">
//addEventlistener および attachEvent かを 判断(関数addListener)==作成
function addListener(element, event, listener) {
   if (element.addEventListener)
       element.addEventListener(event, listener, false);
   else if (element.attachEvent)
       element.attachEvent('on' + event, listener);
   else
       throw new Error('イベントリスナに未対応です。');
};
//上記 判断がら 関数を実行(div#calendar を 扱い其のelement から
//日付のDATAオブジェクトを 要素と絡めて カレンダーを 構築
addListener(window, 'load', calendar_00);
//関数koyomi()==カレンダーを LOAD時 に画面に出力
function calendar_00() {
   var currentmeantime = new Date(2017, 1, 1);
   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;
   if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0)))
       numOfMonth = 29;
   var str = '<table class="table_style">';
   str += '<thead>';
   str += '<tr>';
   for (var i = 0; i <= 6; i++)
       str += '<th>' + daysOfWeek[i] + '</th>';
   str += '</tr>';
   str += '</thead>';
   str += '<tbody>';
   str += '<tr>';
   for (column = 0; column < currentmeantime.getDay() ; column++)
       str += '<td></td>';
   for (var i = 1; i <= numOfMonth; i++) {
       str += '<td>' + i + '</td>';
       if (column == 6) {
           str += '</tr>';
           column = 0;
           if (!(i == numOfMonth))
               str += '<tr>';
       } else
           column++;
   }
   str += '</tbody>';
   str += '</table>';
   $calendar.innerHTML = str;
};
       </script>
   </body>
</html>
```

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る