イベント操作によるアカウント出力

現在以下のコードでアカウント登録の項目![イメージ説明]を作成しています。

コード
```<!DOCTYPE html>
<html>
    <head>
        <title>アカウント登録</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          .base {
            margin: 2% 7% 0;
            height: 500px;
            background: blue;
            padding: 5% 10%;
            box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
          }
          input {
            width: 300px;
            height: 40px;
            font-size: large;
          }
          #tuikaBtn {
            background: green;
          }
          h1 {
            font-family: serif;
          }
          .form-control::placeholder {
              color: #cacaca;
              opacity: 1;
          }
          table {
            border-collapse: collapse; 
          }

          th,td {
            border: 1px solid #312929;
            padding: 5px 10px;
          }
          .card {
            width: 100%;
            height: 350px;
          }
          .back{
            padding: 30px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .form-group{
            margin: 10px 0 15px 0px;
          }
          #result {
            font-size: 120%;
            margin: 10;
            margin: 10px 20px;
            padding: 10px 5px 20px;
            margin: 10px 5px 10px 5px;
          }

          .row .card{
            color: red;
          }

          .card{
            color: blue;
            display: block;
            position: relative;
          }

          #modal{
            display: none;
            margin:1.5em auto 0;
            background-color: white;
            border: 1px solid black;
            width: 50%;
            padding: 10px 20px;
            position: fixed;
            border-radius: 5px;
          }

          #overLay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-color: rgba(0,0,0,0.75);
          }

        </style>
    </head>
    <body>
        <div class="base container">
          <div class="row">
            <h1>アカウント登録</h1>
          </div>
          <div class="row">
            <div class="card" id="card">
              <div class="card-block">
                <form id="form-area" class="form-inline" method="post">
                    <div class="form-group">
                        <div class="input-group">
                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
                        </div>
                    </div>

                    <div class="form-group">
                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
                    </div>

                </form>
                <div id="tuikaMoto">

                </div>
                <div id="result"></div>
              </div>
            </div>
          </div>  
        </div>
      </div>
      <div id="overLay">
      </div>
        <script>
          // ここに処理を書いていきます。
          //設問1
          
          let btn = document.getElementById('tuikaBtn');

          btn.addEventListener('click',function(){
            let name = document.getElementById("namae").value;
            document.getElementById("result").innerHTML = name;
          });  
        </script>
    </body>
</html>

イベント操作で名前の項目だけは出力できたのですが、ニックネームの方は出力
できていません。両方出力するにはどのようにすればよいでしょうか？
どなたかわかる方知恵をお貸し頂きたいです。よろしくお願いします。

Matsumon0104

2022/08/04 04:31

「名前」を参考にするとできそうですが、具体的にどのようなことで悩んでいるのでしょうか？

退会済みユーザー

2022/08/04 05:37

nameでやったことをnicknameでも行えば簡単かと思いますよ

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

回答1件

resultに２行表示するのでしょうか？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  tuikaBtn.addEventListener('click',function(){
4    result.innerHTML=`${namae.value}<br>
5      ${nickname.value}`;
6  });  
7});
8</script>
9
10<form>
11<div>
12<input id="namae" name="namae" type="text">
13</div>
14<div>
15<input id="nickname" name="nickname" type="text">
16</div>
17<div>
18<input id="tuikaBtn" type="button" value="追加">
19</div>
20</form>
21<div id="result"></div>