Q&A
質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
はじめまして teratail さま
画面の領域に 表示をさせ カレンダーを作成したいのですが
###発生している問題・エラーメッセージ
確認用のSTYLE 適用後 日付情報を表示（文字列および数値）を
其れが画面に反映しません。
###該当のソースコード
【HTML FILE】 <!--calendar--> <div id="calendar"> <div id="koyomi"> </div> </div>
【javascript FILE】 //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', koyomi); //init()関数 function init() { var element = document.getElementById("calendar"); //calendar の 範囲 style.backgroundColor="red" 赤色表記(確認用) return element.style.backgroundColor = "red"; }; //関数koyomi()＝＝カレンダーを LOAD時 に画面に出力 function koyomi() { var koyomi = document.getElementById("koyomi"); //DATAOBJECTを取得 変数currentへ(現在時刻を)＝＝1970年1月1日0:00からの経過 時間 var current = new Data(); //DATAOBJECTが 保持其の日時の日を 変数data へ var date = current.getData(); //DATAOBJECTが 保持其の日時の曜日を 変数(数値とし)0～6を変数dayoftheweek へ var dayoftheweek = current.getDay(); //曜日を文字列に 変換 var DAYARRAY = ['日', '月', '火', '水', '木', '金', '土']; var currentdayofthestr = DAYARRAY[currentdayofthestr]; //DATAOBJECTが 保持 其の日時の年を 変数year へ var year = current.getFullYear(); //koyomi(element==id)結果を 出力 koyomi += "<h1>" + data + dayoftheweek + year + "</h1>"; return koyomi; };
###試したこと
jQuery を扱わず 理解を深めたい（多言語も）＝＝ちゃんと
扱えるように
###補足情報(言語/FW/ツール等のバージョンなど)
よろしくお願いいたします。
回答2件
0
質問者さんのコードにあった疑問点は以下の通りです。
0. 関数の後についているセミコロンは不要だと思います。
0. 変数dateは使わないのですか？もしくはdataとタイプミスしているのか。
0. currentdayofthestr変数とは？
質問者さんは初心者の方のようなので、簡潔に。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 table, tr, th, td { 8 border-collapse: collapse; 9 border: solid 1px #000; 10 } 11 12 th:first-child { 13 background-color: magenta; 14 } 15 16 th:last-child { 17 background-color: cyan; 18 } 19 </style> 20</head> 21<body> 22<script> 23 var date = new Date(); 24 var year = date.getFullYear(); 25 var month = date.getMonth() + 1; 26 date.setDate(1); 27 var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; 28 var numOfMonth = monthDays[month - 1]; 29 var daysOfWeek = ["日", "月", "火", "水", "木", "金", "土"]; 30 var column,i; 31 if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))) { 32 numOfMonth = 29; 33 } 34 document.write("<table class='table_style'>"); 35 36 document.write("<tr>"); 37 for (i = 0; i <= 6; i++) { 38 document.write("<th>" + daysOfWeek[i] + "</th>"); 39 } 40 document.write("</tr>"); 41 42 document.write("<tr>"); 43 for (column = 0; column < date.getDay(); column++) { 44 document.write("<td></td>"); 45 } 46 for (i = 1; i <= numOfMonth; i++) { 47 document.write("<td>" + i + "</td>"); 48 if (column == 6) { 49 document.write("</tr>"); 50 column = 0; 51 if (!(i == numOfMonth)) { 52 document.write("<tr>"); 53 } 54 } else { 55 column++; 56 } 57 } 58 document.write("</table>"); 59</script> 60</body> 61</html>
ぜひ参考にしてください。
投稿2016/12/23 04:30
総合スコア14731
ありがとぉございます。外部FILE の関数として 読み込みたくて 打ち込みには慣れて居ません。
(タイプミス)＝＝data とdate はですﾍﾟｺﾘ みじゅくもの のぼくですが よろしく
御ねがい をいたします。 変数名に 意図はありません
ためしに 表示をこころみた だけなので じっさぃ うごくかどうか 検証用で
御座います。
0
ベストアンサー
プログラミングが初めての方なのでしょうか？
DateとDataが違うとか、
DAYARRAYの添え字にその時点で未定義のcurrentdayofthestrなんだよとか、
currentdayofthestrを作ろうとしているのに、なんでdayoftheweekなんだよとか、
Elementに直接HTMLを代入してどうするんだとか
ツッコミどころが多すぎて困るのですが…
とりあえずこんな感じでどうでしょう。
javascript
1//関数koyomi()＝＝カレンダーを LOAD時 に画面に出力 2function koyomi() { 3 var koyomi = document.getElementById("koyomi"); 4 5 var current = new Date(); 6 7 //曜日を文字列に 変換 8 var dayoftheweek = current.getDay(); 9 var DAYARRAY = ['日', '月', '火', '水', '木', '金', '土']; 10 var currentdayofthestr = DAYARRAY[dayoftheweek]; 11 12 var date = current.getDate(); 13 var year = current.getFullYear(); 14 koyomi.innerHTML = "<h1>" + date + "(" + currentdayofthestr + ") "+ year + "</h1>"; 15 16 return koyomi; 17}; 18
投稿2016/12/22 00:21
総合スコア902
ありがとぅござぃます。だがしかし要素が読み込まれていません (´;ω;｀)
読み込まれました (*^-^*)ありがとぉございます(´;ω;｀)ｩｩ,,関数が 記述間違い で
重複を為てました(´;ω;｀)ありがとぉございます！！addEventListener ようやく あつかえます
(´;ω;｀)miu_ras!!先生!!!!!!!!!!!!!!!ぺこり (*^-^*)
まとめて みました miu_ras さまの 構文はぅごいたのですが まとめると ぼくには
ぃまの ぼくにはえらーを はっけん する事が はっけんするのに ものすごく じかんが
掛かります もし 差し障り がなければ ごきょぉじゅ ねがぇまぜんが ？？
<!--javascript-->
//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";
};
//関数calendar_00()＝＝カレンダーを 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 document.write(calendar_00);//return calendar_00;
};
あなたの回答
tips
プレビュー
