javascript 3回目の追記で追加ボタンを非表示にしたい

Question

実現したいこと

プログラミング初心者です。
3回目まで名前とニックネームを追記してそれ以降は追加ボタンを非表示にして追加できないようにしたいです。
非表示の構文自体はちゃんと動作するモノなのは分かったんですが、どうしたら3回目の追記で追加ボタンを非表示にできるのかがわかりません。
恐れ入りますが、どなたかご教授頂けませんでしょうか。
###HTML

<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>

該当のソースコード

for(let i = 0; i < 3; i++){
function tuikaClick(){
if( namae.value==""||nickname.value==""){
return false;
}
else if(i<3){
result.innerText += namae.value+','+nickname.value;
}
else if(i>=3){
let hyoji = document.getElementById("tuikaBtn");
hyoji.style.visibility="hidden";
return false;
}
}
}
let namae = document.getElementById('namae');
let nickname = document.getElementById('nickname');
let result = document.getElementById('result');
let tuikaBtn = document.getElementById('tuikaBtn');
tuikaBtn.addEventListener('click', tuikaClick);

Answer 1

まず、感覚で実装するのでは無く上から順に読んで意味を理解して書いていきましょう。

該当ソースコードですが...
(1) 変数iを0に初期化して宣言
(2) iが3より小さいかチェック（違うなら(5)へ）
(3) tuikaClickという名前の関数を定義（for文の中）※関数の中身は省略します
(4) (2)に戻る
(5) namaeなどの変数を定義
(6) tuikaBtnがクリックされたらtuikaClickを呼ぶ
(7) ここからユーザーのイベント待ち

まずここでおかしいところに気づくでしょうか？
一番は(3)ですね。素直に読むならtuikaClickを3回連続で定義しています。実際にはfor文の中にネストで定義しているだけなので、おそらくtuikaClickが3回定義されることはないでしょうが、ここで定義する意味は全然無いですよね😅
次に(6)でtuikaClickをイベントとして登録している訳ですが、tuikaClickの中だけを見てください。「iって何？」...となりませんか？おそらくfor文が終わった後なのでi = 3になっているのかな？🤔

「3回呼ばれたら動作しない」と言うからにはそのロジックをtuikaClickの中に書かないと意味が無いです👀

該当ソースコードはtuikaClickの定義を3回繰り返すfor文の中に入れているだけになっています😅

var tuikaTimes = 0;
function tuikaClick() {
    if( namae.value == "" || nickname.value == "") return false;
    
    if(tuikaTimes < 3) {
        result.innerText += namae.value + ',' + nickname.value;
        tuikaTimes++; // 1を足す（インクリメント）
        return true;
    } else {
        let hyoji = document.getElementById("tuikaBtn");
        hyoji.style.visibility = "hidden";
        return false;
    }
}
// 以下は同じ

こんな感じで書くならひとまず3回入力までに出来るのでは？
（これも意味を理解してね👀）

参考になれば幸いです😊

Comments

[alphard]

返信が遅くなり大変失礼いたしました。
お忙しい中丁寧にご対応いただき誠にありがとうございます。
なんとか追加ボタンを非表示にすることが出来ました😢
勉強不足を痛感するばかりです。
もっと理解を深められるよう頑張ります。
貴重なお時間を割いて下さり本当にありがとうございました。