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

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

ただいまの
回答率

90.03%

javascript 外部FILE(読み込み)==画面に表示させる には??(数字文字列)

解決済

回答 2

投稿 編集

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

learner-crow

score 11

前提・実現したいこと

はじめまして 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/ツール等のバージョンなど)

よろしくお願いいたします。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • kei344

    2016/12/22 11:11

    質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

    キャンセル

  • learner-crow

    2016/12/23 11:47

    ありがとぅござぃます。訂正いたしました。

    キャンセル

回答 2

+3

質問者さんのコードにあった疑問点は以下の通りです。

  1. 関数の後についているセミコロンは不要だと思います。
  2. 変数dateは使わないのですか?もしくはdataとタイプミスしているのか。
  3. currentdayofthestr変数とは?

質問者さんは初心者の方のようなので、簡潔に。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        table, tr, th, td {
            border-collapse: collapse;
            border: solid 1px #000;
        }

        th:first-child {
            background-color: magenta;
        }

        th:last-child {
            background-color: cyan;
        }
    </style>
</head>
<body>
<script>
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    date.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,i;
    if (month == 2 && ((year % 4 == 0 && year % 100 != 0) || (year % 400 == 0))) {
        numOfMonth = 29;
    }
    document.write("<table class='table_style'>");

    document.write("<tr>");
    for (i = 0; i <= 6; i++) {
        document.write("<th>" + daysOfWeek[i] + "</th>");
    }
    document.write("</tr>");

    document.write("<tr>");
    for (column = 0; column < date.getDay(); column++) {
        document.write("<td></td>");
    }
    for (i = 1; i <= numOfMonth; i++) {
        document.write("<td>" + i + "</td>");
        if (column == 6) {
            document.write("</tr>");
            column = 0;
            if (!(i == numOfMonth)) {
                document.write("<tr>");
            }
        } else {
            column++;
        }
    }
    document.write("</table>");
</script>
</body>
</html>


ぜひ参考にしてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/26 17:21

    ありがとぉございます。外部FILE の関数として 読み込みたくて 打ち込みには慣れて居ません。
    (タイプミス)==data とdate はですペコリ みじゅくもの のぼくですが よろしく
    御ねがい をいたします。  変数名に 意図はありません  
    ためしに 表示をこころみた だけなので  じっさぃ うごくかどうか 検証用で
    御座います。  

    キャンセル

checkベストアンサー

0

プログラミングが初めての方なのでしょうか?
DateとDataが違うとか、
DAYARRAYの添え字にその時点で未定義のcurrentdayofthestrなんだよとか、
currentdayofthestrを作ろうとしているのに、なんでdayoftheweekなんだよとか、
Elementに直接HTMLを代入してどうするんだとか
ツッコミどころが多すぎて困るのですが…
とりあえずこんな感じでどうでしょう。

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

    var current = new Date();

    //曜日を文字列に 変換 
    var dayoftheweek = current.getDay();
    var DAYARRAY = ['日', '月', '火', '水', '木', '金', '土'];
    var currentdayofthestr = DAYARRAY[dayoftheweek];

    var date = current.getDate();
    var year = current.getFullYear();
    koyomi.innerHTML = "<h1>" + date + "(" + currentdayofthestr + ") "+ year + "</h1>";

    return koyomi;
};

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/12/23 11:50

    ありがとぅござぃます。だがしかし要素が読み込まれていません  (´;ω;`)

    キャンセル

  • 2016/12/26 21:44

    読み込まれました  (*^-^*)ありがとぉございます(´;ω;`)ゥゥ,,関数が  記述間違い で 
    重複を為てました(´;ω;`)ありがとぉございます!!addEventListener ようやく あつかえます
    (´;ω;`)miu_ras!!先生!!!!!!!!!!!!!!!ぺこり  (*^-^*)

    キャンセル

  • 2016/12/31 22:23 編集

    まとめて みました 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;
    };

    キャンセル

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

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