JS　確認画面#5 [データ取得・表示]

流れ

1. HTMLとCSSで入力フォームの見た目を整える。　

2.  JavaScriptで入力内容の確認を行う。

3. 送信ボタンがクリックされたときの処理を実装する。

4. 確認画面の見た目を作成する。

5. 確認画面に入力されたデータを表示する処理を追加する←今回

6. 全体のまとめ

画面

前回から引用↓こうしたいよね。

機能

ソースコード

js

// URLからクエリパラメータを取得
var queryString = window.location.search;
var urlParams = new URLSearchParams(queryString);

// パラメータからデータを取得
var nameKan = urlParams.get('nameKan');
var email = urlParams.get('email');
var gender = urlParams.get('gender');
    // 選択された性別を取得
    let selectedGender = "未登録";
    if (gender == "male") {
        selectedGender = "男性";
    } else if (gender== "female") {
        selectedGender = "女性";
    }
// 各データを取得
var nameKan = urlParams.get('nameKan');
var nameHira = urlParams.get('nameHira');
var YMD = urlParams.get('YMD');
var phone = urlParams.get('phone');
var email = urlParams.get('email');
var zipcode = urlParams.get('zipcode');
var prefecture = urlParams.get('prefecture');
var city = urlParams.get('city');
var building = urlParams.get('building');
var password = urlParams.get('password');

var displayHTML = `
        <div class="confirmation">
            <h2>入力内容の確認</h2>
            <table>
                <tr>
                    <td>名前（漢字）:</td>
                    <td>${nameKan}</td>
                </tr>
                <tr>
                    <td>名前（ひらがな）:</td>
                    <td>${nameHira}</td>
                </tr>
                <tr>
                    <td>性別:</td>
                    <td>${selectedGender}</td>
                </tr>
                <tr>
                    <td>日付:</td>
                    <td>${YMD}</td>
                </tr>
                <tr>
                    <td>電話番号:</td>
                    <td>${phone}</td>
                </tr>
                <tr>
                    <td>メールアドレス:</td>
                    <td>${email}</td>
                </tr>
                <tr>
                    <td>郵便番号:</td>
                    <td>${zipcode}</td>
                </tr>
                <tr>
                    <td>都道府県:</td>
                    <td>${prefecture}</td>
                </tr>
                <tr>
                    <td>市区町村:</td>
                    <td>${city}</td>
                </tr>
                <tr>
                    <td>建物名:</td>
                    <td>${building}</td>
                </tr>
                <tr>
                    <td>パスワード:</td>
                    <td>${password}</td>
                </tr>
            </table>
        </div>
    `;

// 表示用の<div>要素にHTMLを設定
document.getElementById('dataDisplay').innerHTML = displayHTML;