追加ボタンをクリックすると、div要素に入力された名前とニックネームが追記されるようにしたい

現在JavaScriptを学習しています。

追加ボタンをクリックすると、div要素に入力された名前とニックネームが追記されるようにしたいのですが、以下のコードを書いても追加ボタンが押せません。
調べても何が間違っているのか分からなかったので質問させていただきました。

html

 <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>
            let result = document.getElementById("result");
            let tuikanumber = 0;
            let tuikaBtn = document.getElementById("tuikaBtn");
              tuikaBtn.addEventListener('click',function() {
            let namae = document.getElementById("namae");
            let nickname = document.getElementById("nickname");
            });

int32_t

2022/10/20 05:34

> div要素にどのdiv要素ですか? JavaScriptからdiv要素内にテキストを足す方法はわかりますか? > 追加ボタンが押せません。押しても何も起きないのではなく、押せないのですか?

Hello.world

2022/10/20 05:51

質問が不十分で申し訳ございません。 > どのdiv要素ですか? JavaScriptからdiv要素内にテキストを足す方法はわかりますか? resultのdiv要素です。テキストを足す方法は分かりません。 >押しても何も起きないのではなく、押せないのですか? 押しても何の反応もありません。

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

回答2件

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  let tuikanumber = 0;
4  tuikaBtn.addEventListener('click',()=>{
5    result.innerHTML+=`${++tuikanumber}:名前=${namae.value}/ニックネーム=${nickname.value}<br>`;
6  });
7});
8</script>
9<div class="base container">
10          <div class="row">
11            <h1>アカウント登録</h1>
12          </div>
13          <div class="row">
14            <div class="card" id="card">
15              <div class="card-block">
16                <form id="form-area" class="form-inline" method="post">
17                    <div class="form-group">
18                        <div class="input-group">
19                          <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
20                        </div>
21                    </div>
22                    <div class="form-group">
23                        <div class="input-group">
24                            <input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム">
25                        </div>
26                    </div>
27
28                    <div class="form-group">
29                      <input id="tuikaBtn" type="button" name="touroku" value="追加">
30                    </div>
31
32                </form>
33                <div id="tuikaMoto">
34
35                </div>
36                <div id="result"></div>
37              </div>
38            </div>
39          </div>  
40        </div>
41      </div>
42      <div id="overLay">
43      </div>

投稿2022/10/20 05:58

yambejp

総合スコア114843

ベストアンサー

js
1            let namae = document.getElementById("namae");
2            let nickname = document.getElementById("nickname");

この次の行に、名前とニックネームを追記するコードを書きましょう。

result.textContent で対象divのテキストを参照したり更新したりできます。
namae.value で名前フィールドの値を参照できます。
nichname.value でニックネームフィールドの値を参照できます。

投稿2022/10/20 05:56

int32_t

総合スコア20884

Hello.world

2022/10/20 22:49 編集

ありがとうございます！ let namae = document.getElementById("namae"); let nickname = document.getElementById("nickname"); result.textContent = namae.value; result.textContent = nickname.value; このように記述したのですが、resultのdiv要素に追記されたのかどうかはどうすれば確認出来るのでしょうか？