参考コードの解説

時刻選択ダイアログの参考コード

表示結果

https://scrapbox.io/files/65d8df43f15e3b002539b428.png

挙動

「時刻を選択」のinput要素をクリック

「予約時刻」ダイアログが表示される

予約時刻ボタンをクリック

input要素に選択した時刻が代入される

ダイアログが閉じる

表示結果とコードの対応関係

https://gyazo.com/cfdf2ac23012737b88b0358ceb07e0bd

HTMLの解説

input#input-time

予約時刻を入力するテキストボックス

div#dialog-time

予約時刻選択ダイアログ本体

JavaScriptの解説

timeLabelGroups

予約可能な時刻の配列の定義

これらの時刻は後でボタンとして表示される

関数openDialog、関数closeDialog

関数renderTimeButtons

timeLabelGroupsで定義された時刻をボタンとしてダイアログに表示する

ユーザーがボタンをクリックすると、その時刻が入力フィールドにセットされ、ダイアログが閉じる

関数initializeMyTimePicker

時刻選択ダイアログを初期化するために呼び出される

おまけ: JavaScriptの構文解説

document.querySelector("#foo")

document.querySelector(".foo")

document.querySelector("body")

HTMLタグ名がbodyであるHTML要素を取得する

document.createElement("div")

タグ名を指定して新しいHTML要素を作成する

今回は下記のように、予約時刻の button を作るために使用している

code:js

const button = document.createElement("button");

button.innerText = timeLabel;

作成した要素は appendChild 関数によって既存のHTML要素の末尾に挿入できる

逆に、appendChildを呼び出すまでは画面に存在しないので注意

element.addEventListener("click", function (event) { ... })

element（HTML要素）がクリックされたときの動作を定義する

クリックされると2つ目の引数に与えた function が実行される

そのさい function の引数として event を受け取れて、これにはいろいろ便利な情報が詰まっている

function 内部でconsole.logを使って詳細を覗いてみると勉強になる

code:js

console.log(event);

element.style.display =

elementのCSSを動的に更新できる