JavaScriptでフォームのデフォルトの日付を今日にする。

やったこと

前回（Pythonフレームワークbottleにbootstrapを導入してみた。）の続き。

  • HTMLソースコードのフォーム部分にidを付与（JavaScript用）
  • JavaScriptコードを記述し、日付のところのデフォルト値を今日の日付（動的）に設定
  • JavaScriptファイルを作成し、HTMLからJavaScriptファイルを読み込んで実行
  • バックエンド側（Pythonファイル）は変更なし。

以下のページも参考になった。
超絶初心者のためのフロント入門（HTML、CSS、JavaScript）
【超初心者向け】JavaScriptの基本的な書き方講座

JavaScriptの記述において、JavaScript初心者がやりがちなミス3つ に書いていることをやってしまい、作成に時間がかかってしまった。。。

ファイル構成

.
├── form.py
├── views
│  └── base.html
│  └── form.html
│  └── form_failed.html
└── static
  └── main.js

作成コード

JavaScript用のファイルを作成した。ここに、今日の日付を取得するコードを記述している。

window.onload = function (){
	var today = new Date();
	today.setDate(today.getDate());
	var yyyy = today.getFullYear();
	var mm = ("0"+(today.getMonth()+1)).slice(-2);
	var dd = ("0"+today.getDate()).slice(-2);
	document.getElementById("date").value = yyyy + '-' + mm + '-' + dd;
}

（参考ページ）
input type=”date”を使った日付入力フォーム

ベースとなるHTMLファイルには、外部のJavaScriptファイルを呼び出すコードを追加した。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
    <!-- JavaScript File -->
    <script type="text/javascript" src="./static/main.js" charset="utf-8"></script>

    <title> {{ title }} </title>
</head>
<body>

    {% block contents %}
    {% endblock %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
</body>
</html>

 

フォーム部分のHTMLコードには、idを付与した。

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}

<div class="container">
	<h1>Togglのデータをエクスポートするツールです。</h1>
	<form action = "/download" method = "post">
		メールアドレス<span class = "badge badge-danger">必須</span>  : <input name = "email" type = "email"  placeholder = "example@gmail.com" required/><br>
		パスワード<span class = "badge badge-danger">必須</span>　　  : <input name = "password" type = "password" placeholder="xxxxxxxx" required/><br>
		日付<span class = "badge badge-danger">必須</span>　　　　　 ：<input name = "date" type = "date" id = "date" required/><br>
		<button type = "submit" class = "btn btn-primary" id = "download">ダウンロード</button>
	</form>
</div>

<script type="text/javascript">
	var today = new Date();
	today.setDate(today.getDate());
	var yyyy = today.getFullYear();
	var mm = ("0"+(today.getMonth()+1)).slice(-2);
	var dd = ("0"+today.getDate()).slice(-2);
	document.getElementById("date").value = yyyy + '-' + mm + '-' + dd;
</script>

{% endblock %}

実行結果

今日の日付が自動で表示されるようになった。

つまづいたところ

以下のコードで試してみたところエラーが出た。

<!DOCTYPE html>
<html lang="ja">
<head>
    <!-- Required meta tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
 
    <title> {{ title }} </title>
</head>
<body>

    {% block contents %}
    {% endblock %}

    <!-- JavaScript File -->
    <script type="text/javascript" src="/static/main.js" charset="utf-8"></script>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    
</body>
</html>
{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}

<div class="container">
	<h1>Togglのデータをエクスポートするツールです。</h1>
	<form action = "/download" method = "post">
		メールアドレス<span class = "badge badge-danger">必須</span>  : <input name = "email" type = "email"  placeholder = "example@gmail.com" required/><br>
		パスワード<span class = "badge badge-danger">必須</span>　　  : <input name = "password" type = "password" placeholder="xxxxxxxx" required/><br>
		日付<span class = "badge badge-danger">必須</span>　　　　　 ：<input name = "date" type = "date" id = "today" required/><br>
		<button type = "submit" class = "btn btn-primary" id = "download">ダウンロード</button>
	</form>
</div>

{% endblock %}
function (){
    var today = new Date();
    today.setDate(today.getDate());
    var yyyy = today.getFullYear();
    var mm = ("0"+(today.getMonth()+1)).slice(-2);
    var dd = ("0"+today.getDate()).slice(-2);
    document.getElementById("date").value = yyyy + '/' + mm + '/' + dd;
};

不具合内容

Chromeのディベロッパーツールで確認すると以下のエラーが表示されていた。

Uncaught SyntaxError: Unexpected token (

Visual Studio Code上では以下のエラーコードが表示されていた。

[ts]識別子が必要です。[1003](1,9)

以下のMicrosoft社の構文エラーコードのページと合わせてみたところ、「 ‘:’ が必要です」とのこと。参考にならない。。。
（参考ページ）
JavaScript 構文エラー

ちなみに、JavaScriptのコードをHTMLファイル内に直接記述し、テストしてみたところ正常に動いた。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script>
      var today = new Date();
      today.setDate(today.getDate());
      var yyyy = today.getFullYear();
      var mm = ("0"+(today.getMonth()+1)).slice(-2);
      var dd = ("0"+today.getDate()).slice(-2);
      document.write("<p>" + yyyy +'/' + mm + '/' + dd + "</p>");
    </script>
  </body>
</html>

原因

  • JavaScriptコードの記述位置
  • JavaScriptの実行順番

解決策

外部のJavaScriptファイルを読み込むのではなく、HTMLファイル内に直接JavaScriptを記述してみたところ動いた。
このとき、JavaScriptのコードは該当のidがあるタグよりも後ろに位置していないと以下のエラーが出る。

Uncaught TypeError: Cannot set property 'value' of null

以下のコードのように、JavaScriptのコードを該当のidがあるタグよりも後ろに書いておくと正常に動く。

{% extends 'base.html' %}

{# base.html の contents の中に入れるコンテンツ #}
{% block contents %}

<div class="container">
	<h1>Togglのデータをエクスポートするツールです。</h1>
	<form action = "/download" method = "post">
		メールアドレス<span class = "badge badge-danger">必須</span>  : <input name = "email" type = "email"  placeholder = "example@gmail.com" required/><br>
		パスワード<span class = "badge badge-danger">必須</span>　　  : <input name = "password" type = "password" placeholder="xxxxxxxx" required/><br>
		日付<span class = "badge badge-danger">必須</span>　　　　　 ：<input name = "date" type = "date" id = "today" required/><br>
		<button type = "submit" class = "btn btn-primary" id = "download">ダウンロード</button>
	</form>
</div>

<script type="text/javascript">
	// function SetDate();
	var today = new Date();
	today.setDate(today.getDate());
	var yyyy = today.getFullYear();
	var mm = ("0"+(today.getMonth()+1)).slice(-2);
	var dd = ("0"+today.getDate()).slice(-2);
	// var date = yyyy + '-' + mm + '-' + dd;
	// return date;
	document.getElementById("today").value = yyyy + '-' + mm + '-' + dd;
</script>

{% endblock %}

（参考ページ）
javasprictのコードを書く順番について

JavaScriptファイルを外部ファイルに記述する場合は、JavaScriptの実行順番に気をつけないといけない。
今回の場合だと、以下のように、window.onloadを使った。

window.onload = function (){
    // ここに最後に実行するコードを記述する
}

（参考ページ）
ページ読み込み時のJavaScriptの実行タイミング

やってみた感想

JavaScriptの構文や書き方が全く分かっておらず、いろいろなものを参考にしながら進めた。
時間はかかったが、うまく動いたときはものすごく嬉しい。

Web開発はフロント、バックエンド含め勉強することが多い。
これから先、サーバーにデプロイするときにはまた分からないことが山程出てくるだろうが、エラーコードと向き合っていればなんとか解決できるだろう。

その他参考記事

【Trainer’s Recipe】Pythonのフレームワークのflaskを触ってみた。
HTMLの要素を取得する! JavaScriptのdocumentプロパティの使い方

次のページ（）へ進む

コメント

タイトルとURLをコピーしました