JavaScript フォームの確認画面を作成したい

前提

確認ボタンを押すことで、確認画面をフォームの下へ表示することはできました。

質問

下記の2点を実装したいと考えています。よろしくお願いいたします。

確認画面をdivタグに上書きしたい。
確認画面の戻るボタンで元の画面を表示したい。

HTML
1<h3>Document</h3>
2<div>
3    <p>入力画面</p>
4    <form>
5        <dl>
6            <dt>1.TEXT</dt>
7            <dd><input type="text" name="text1" /></dd>
8        </dl>
9        <input id="button" type="button" value="確認" />
10    </form>
11</div>
12<p id="result"></p>

JavaScript
1// 確認ボタンが押されたら確認画面の表示
2document.getElementById("button").addEventListener("click", function () {
3    const data = document.getElementsByName("text1");
4
5    const p1 = document.createElement("p");
6    p1.appendChild(document.createTextNode("確認画面"));
7    document.getElementById("result").appendChild(p1);
8
9    const p2 = document.createElement("p");
10    p2.appendChild(document.createTextNode("1.TEXT: " + data[0].value));
11    document.getElementById("result").appendChild(p2);
12
13    // 戻るボタン配置
14    const backButton = document.createElement('input');
15    backButton.setAttribute("id", "back");
16    backButton.type = "button";
17    backButton.value = "戻る";
18    document.getElementById("result").appendChild(backButton);
19});

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

回答1件

ベストアンサー

こんな感じで意図通り動きますか？
せっかくなので、非同期で書いてみました。

「イベントを非同期で取得する」の関数はわからなくて大丈夫です。とにかく非同期コンテキストで element.observe() でイベントを待てるということだけ知っておいてください。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<title>Document</title>
7</head>
8<body>
9	<h3>Document</h3>
10	<div id="work">
11		<p>入力画面</p>
12		<form>
13			<dl>
14				<dt>1.TEXT</dt>
15				<dd><input type="text" name="text1" /></dd>
16			</dl>
17			<input id="button" type="button" value="確認" />
18		</form>
19	</div>
20
21	<script>
22		// イベントを非同期で取得する
23		HTMLElement.prototype.observe = function (type) {
24			const getHandler = resolve => {
25				const result =  () => {
26					resolve();
27					this.removeEventListener(type, result);
28				};
29				return result;
30			};
31			return new Promise(resolve => this.addEventListener(type, getHandler(resolve)));
32		};
33
34		(async () => {
35			while (true) {
36				// ボタンクリックを待つ
37				await document.getElementById("button").observe("click");
38
39				// ワークエリアを取得
40				const workArea = document.getElementById("work");
41
42				// ワークエリアをバックアップ
43				const backup = workArea.cloneNode(true);
44
45				// ワークエリアを結果で書き換える
46				workArea.innerHTML = `
47					<p>確認画面</p>
48					<p>1.TEXT: ${document.getElementsByName("text1")[0].value}</p>
49					<input id="back" type="button" value="戻る">
50				`;
51
52				// 戻るボタンのクリックを待つ
53				await document.getElementById("back").observe("click");
54
55				// ワークエリアを戻す
56				document.body.replaceChild(backup, workArea);
57			}
58		})();
59	</script>
60</body>
61</html>

追記

EventTarget.addEventListener() は option に once を渡すことで実行後自動的に削除できますが、将来、実行されなかったものを削除できる仕組みに拡張したいため、あえて removeEventListener() を入れています。
入れないなら次のようにシンプルになります。

JavaScript
1HTMLElement.prototype.observe = function (type) {
2	return new Promise(resolve => this.addEventListener(type, resolve, {once: true}));
3};