<h1>ユーザー登録フォーム</h1>

<div>
  <label for="name">名前:</label>
  <input type="text" id="name" placeholder="山田太郎">
</div>

<div>
  <label for="age">年齢:</label>
  <input type="number" id="age" min="0" max="150" value="20">
</div>

<div>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" placeholder="example@example.com">
</div>

<div>
  <label>
    <input type="checkbox" id="newsletter">
    メールマガジンを受け取る
  </label>
</div>

<button id="registerButton">登録する</button>

<div id="result"></div>

<script>
  const nameInput = document.querySelector("#name");
  const ageInput = document.querySelector("#age");
  const emailInput = document.querySelector("#email");
  const newsletterCheckbox = document.querySelector("#newsletter");
  const registerButton = document.querySelector("#registerButton");
  const result = document.querySelector("#result");

  registerButton.addEventListener("click", () => {
    const name = nameInput.value;
    const age = Number(ageInput.value);
    const email = emailInput.value;
    const newsletter = newsletterCheckbox.checked;

    const newsletterText = newsletter ? "受け取る" : "受け取らない";

    result.innerHTML = `
      <h3>登録内容の確認</h3>
      <div>名前: ${name}</div>
      <div>年齢: ${age}歳</div>
      <div>メールアドレス: ${email}</div>
      <div>メールマガジン: ${newsletterText}</div>
    `;
  });
</script>