<input>の値が取得できない

前提・実現したいこと

バニラjavascriptで入力ダイアログを作っています。
<input>の値をコンソールに表示させたいです。
（動的にダイアログを生成・表示させたいためcreateElement()で各種タグを定義しています）
ですが、どうしても<input>の値を取得することができません。

お力添えよろしくお願いします。

発生している問題・エラーメッセージ

コンソールに何も表示されない

該当のソースコード

js
1// 要素を定義
2var dialog = document.createElement("dialog");
3dialog.id = "dialog";
4
5var form = document.createElement("form");
6form.method = "dialog";
7
8var input = document.createElement("input");
9input.id = "input";
10
11// 要素を追加
12form.appendChild(input);
13dialog.appendChild(form);
14document.body.appendChild(dialog);
15
16// dialogをモーダル表示する
17var moge = document.getElementById("dialog");
18moge.showModal();
19
20// <input>の値を取得したい...
21var hoge = document.getElementById("input").value;
22console.log(hoge);

補足情報（FW/ツールのバージョンなど）

使用ブラウザはchrome最新版です
electronを使っているため、prompt()が禁止されています

kei344

2020/05/07 05:55

HTMLも提示してください。

nerunoda

2020/05/07 06:55

```html <!DOCTYPE html> <html> <head> <script> // メイン function main() { var dialog = document.createElement("dialog"); dialog.id = "dialog"; var form = document.createElement("form"); form.method = "dialog"; var input = document.createElement("input"); input.id = "input"; // 要素を追加 form.appendChild(input); dialog.appendChild(form); document.body.appendChild(dialog); // dialogをモーダル表示する var moge = document.getElementById("dialog"); moge.showModal(); // <input>の値を取得したい... moge.addEventListener("close", () => { var hoge = document.getElementById("input").value; console.log(hoge); }); } </script> </head> <body onLoad="main()"> </body> </html> ``` です。 headにcreateElementするjsだけ書いてbodyは空というhtmlだったので記載していませんでした。すみません。

行動規範の内容に同意します

回答2件

ベストアンサー

動作を確認したところshowModalはモーダルダイアログを開いた時点でコードの実行がストップするのではなく、モーダルダイアログを開いたあと（入力を待たずに）次の行に制御が移る動作になっているようです。
以下のようにcloseイベントを利用すれば、モーダルダイアログを閉じたときの値を取得できました。

javascript
1// dialogをモーダル表示する
2var moge = document.getElementById("dialog");
3moge.showModal();
4
5moge.addEventListener("close", () => {
6	var hoge = document.getElementById("input").value;
7	console.log(hoge);
8});