名前とニックネームを3回追記したらボタンを非表示にし、それ以降は追記できないようにしたいです

プログラミング初心者です。
名前とニックネームを3回追記したらボタンを非表示にし、それ以降は追記できないようにしたいです。
また、追加ボタンを押した際に「[namae]さん[nickname]を登録します。よろしいですか？」という確認ダイアログ（confirm）を挟み、 ok ボタンを押した場合のみ入力値が追記されること。
名前とニックネームを追記した後に、「[namae]さん[nickname]にて登録しました。」という警告ダイアログ（alert）を表示すること。
名前またはニックネームを入力していない状態で追加ボタンを押した場合は、追記されないようにすること。
これらの条件も満たした上で実装したいです。
恐れ入りますが、どなたかご教授頂けませんでしょうか。

HTML
1!DOCTYPE html>
2<html>
3    <head>
4        <title>アカウント登録</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7</head>
8    <body>
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>
44     </body>
45</html>
46
47```JS
48let button = document.getElementById("tuikaBtn");
49        button.addEventListener("click",function(e) {
50        e.preventDefault();
51
52        var tuikaTimes = 0;
53        function tuikaClick() {
54        if( namae.value == "" || nickname.value == "") return false;
55    
56        if(tuikaTimes < 3) {
57        result.innerText += namae.value + ',' + nickname.value;
58        tuikaTimes++; 
59        return true;
60        } else {
61        let hyoji = document.getElementById("tuikaBtn");
62        hyoji.style.visibility = "hidden";
63        return false;
64    }
65}
66
67        let namae = document.getElementById("namae").value;
68        let nickname = document.getElementById("nickname").value;
69        let result = document.getElementById("result");
70        let tuikaBtn = document.getElementById("tuikaBtn");
71        tuikaBtn.addEventListener('click', tuikaClick);
72        
73        if(namae == "" || nickname == "") return false;
74        let res = window.confirm ('「' + namae +'さん' + nickname+'を登録します。よろしいですか？」') ;
75        if(res == true) {
76        result.value = `${namae},${nickname}`;
77        window.alert('「' + namae + 'さん' + nickname + 'にて登録しました。」');
78        
79        } });

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

回答1件

ベストアンサー

とりあえず、

js
1				tuikaTimes++;
2				if (tuikaTimes < 3) {

の用にインクリメントを外に出して、

js
1			tuikaBtn.addEventListener('click', tuikaClick);
2			tuikaClick();

のように1回目から呼び出すようにしてみてはどうでしょうか。

投稿2022/05/27 00:50

Lhankor_Mhy

総合スコア36115

ryu0502

2022/05/27 13:16

お忙しい中ご対応ありがとうございました。参考にさせて頂きたいと思います！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

名前とニックネームを3回追記したらボタンを非表示にし、それ以降は追記できないようにしたいです

関連した質問