前提
フォームで入力された値をJSONへ変換し、確認画面で表示するプログラムを作成しました。
JSONへ変換する理由は、データ保存のためJSON形式でAPIサーバへリクエストするためです。
質問
エラーなく動作しておりますが、コメント「フォームの値をJSONへ変換」の箇所が非効率です。
クラス属性順にフォームの値を取得していることが原因と思います。
効率的な考え方等、教えていただければと思います。
参考
「JavaScript フォームの確認画面を作成したい」の続きの質問です。
ソースコード
HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8</head>
9
10<body>
11 <h3>Document</h3>
12 <div id="work">
13 <p>入力画面</p>
14 <form>
15 <p class="text">Q1.TEXT: <input type="text" name="text1" value="hoge" /></p>
16 <p class="radio">Q2.RADIO:
17 <input type="radio" name="radio1" value="A" checked />A
18 <input type="radio" name="radio1" value="B" />B</p>
19 <p class="text">Q3.TEXT: <input type="text" name="text2" value="fuga" /></p>
20 <p class="radio">Q4.RADIO:
21 <input type="radio" name="radio2" value="A" />A
22 <input type="radio" name="radio2" value="B" checked />B
23 <input type="radio" name="radio2" value="C" />C</p>
24 <input id="button" type="button" value="確認" />
25 </form>
26 </div>
27
28 <script>
29 // イベントを非同期で取得する (非同期コンテキストで element.observe() でイベントを待つ)
30 HTMLElement.prototype.observe = function (type) {
31 return new Promise(resolve => this.addEventListener(type, resolve, { once: true }));
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 let formValue = [];
47 const countText = document.getElementsByClassName("text").length
48 for (let i = 1; i < countText + 1; i++) {
49 formValue.push(document.getElementsByName(`text${i}`)[0].value);
50 }
51 const countRadio = document.getElementsByClassName("radio").length
52 for (let i = 1; i < countRadio + 1; i++) {
53 const data = document.getElementsByName(`radio${i}`);
54 for (var j = 0; j < data.length; j++) {
55 if (data[j].checked) {
56 formValue.push(data[j].value);
57 break;
58 }
59 }
60 }
61
62 // フォームの値をJSONへ変換
63 let formJson = new Object();
64 formJson.Q1 = formValue[0];
65 formJson.Q2 = formValue[2];
66 formJson.Q3 = formValue[1];
67 formJson.Q4 = formValue[3];
68 console.log(formJson);
69
70 // ワークエリアを結果で書き換える
71 let html = "";
72 for (let i = 1; i < 5; i++) {
73 html += `<p>Q${i}.` + formJson[`Q${i}`] + "</p>"
74 }
75 workArea.innerHTML = `
76 <p>確認画面</p>
77 ${html}
78 <input id="back" type="button" value="戻る">
79 <input id="send" type="button" value="送信">
80 `;
81
82 // 送信ボタンがクリックされたら
83 document.getElementById("send").addEventListener("click", function () {
84 console.log("APIサーバへリクエスト");
85 });
86
87 // 戻るボタンのクリックを待つ
88 await document.getElementById("back").observe("click");
89
90 // ワークエリアを戻す
91 document.body.replaceChild(backup, workArea);
92 }
93 })();
94 </script>
95</body>
96
97</html>
Q&A
ベストアンサー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/09/26 00:08