名前またはニックネームを入力していない状態で追加ボタンを押した場合は、 追記されないようにしなさい。

Question

プログラミング初心者です。恐れ入りますが、名前またはニックネームをを入力されてなかったら追加ボタンを押しても追記されないようにしたいですが、以下のコードを書いてもどうしても追記されてしまいます。どのように書いてたら追記されなくなるかご教授下さい。
よろしくお願いします。

--[html]--

<div class="form-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>
               <div id="result"></div>

--[JS]--

let button = document.getElementById("tuikaBtn");
        button.addEventListener("click",function(e) {
        e.preventDefault();
        let namae = document.getElementById("namae").value;
        let nickname = document.getElementById("nickname").value;
        let result = document.getElementById("result");
        let tuikaBtn = document.getElementById("tuikaBtn");
        tuikaBtn.addEventListener('click',tuikaBtn);
        result.value = `${namae},${nickname}`;
        
        if(namae.value == "" || nickname.value == "") return false;
　　　let res = window.confirm ('「' + namae +'さん' + nickname+'を登録します。よろしいですか？」') ;
        if(res == true) {
        window.alert('「' + namae + 'さん' + nickname + 'にて登録しました。」');
        } });

Comments

[k.a_teratail]

ソースコードに関しては、「コードの挿入」を行なって記載してください。

> <input id="namae" name="namae" type="text" class="form-control" placeholder="名前">
> </div>
> </div>
コードも一部記載でしょうか？
divタグの開始部分がありません。

js部分にも疑問点があります。

> let result = document.getElementById("result");
html側に対応のIDが記載されていません。

> result.value = namae, nickname;
この部分でエラーが出ていました。
これは文字列として設定を行いたいのでしょうか？
だとすれば「`${namae}, ${nickname}`」と記載する必要があります。

> button.addEventListener("click", function (e) {
の閉じ括弧「});」を忘れています。

[y_waiwai]

このままではコードが読みづらいので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

[int32_t]

「追記」というのは result.value への代入のことでしょうか?

[aaa999]

はい、 result という id 属性が指定された div 要素先に代入したいです。

Answer 1

        result.value = `${namae},${nickname}`;
        
        if(namae.value == "" || nickname.value == "") return false;

• namaeや nickname のチェックよりも前に結果を書き出しているので、そりゃあどうしても追記されます。result.value への書き込みは if (res == true) { の中に移動すべきでしょう。
• namae と nickname は <input> の value プロパティの値なので、文字列です。文字列に value プロパティはありませんので、namae.value と "" が等しくなることはありません。
• tuikaBtn.addEventListener('click',tuikaBtn); この行が意味不明です。

Comments

[aaa999]

int32_tさん
・result.valueをif (res == true) { の中に移動しました。
・if(namae.value == "" || nickname.value == "") return false;のところはどのように直したらいいですか？
・tuikaBtn.addEventListener('click',tuikaBtn);は消し忘れてたので消しました。

[int32_t]

namae == "" などでよいです。

[aaa999]

アドバイス通りにしたら出来ました。
教えてくれてありがとうございました。