入力回数が規定回数までなったらボタンが非表示になるようにしたい

追加ボタンを押すと"tuikanumber"に１足すようにし、"tuikanumber"が３以上になるとボタンが非表示になるように記述しているのですが上手くいきません。
処理の順番が間違っているのでしょうか？

html

 <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>
            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");
              
            if(namae.value == "" || nickname.value == "")return false;
            
            if(window.confirm(
              namae.value + "さん" + nickname.value + "を登録します。よろしいですか？"
              )) {
              return result.textContent = `${namae.value} ${nickname.value}`,
              window.alert(
              namae.value + "さん" + nickname.value + "にて登録しました。"
              );
              tuikanumber++;
              } else {
              return false;
              }
            
            if(tuikanumber >= 3) {
              tuikaBtn.style.visibility = "hidden";
              return false;
            }
            
          
          });


        </script>

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

回答1件

ベストアンサー

不具合の原因

tuikanumberのカウントがいっさい増えていません。
- その理由は、tuikanumber++;のまえにreturnしているからです。
- returnをすると、return以降のそのスコープの処理はいっさい実行されません。
- ですのでしなければならない処理はreturnの前に書きましょう。
また、result.textContent = ...はreturnする意味がありませんので、returnなしでそのまま書いたらいいと思います。
またnamae.value, nickname.valueを何回も書いているのが気になりました。
- 繰り返し利用する値は、定数や変数に格納しましょう。
if (window.confirm(namae.value + "さん" + nickname.value + "を登録します。よろしいですか？")) {...}が非常に可動性が悪いです。
- 一旦定数や変数に格納して（例 const response = window.confirm(...)）
- if (response) {...}と書くことをおすすめします。
その他不要なところでreturnやreturn false;をしていましたので、削除しました。

コード例

javascript
1const result = document.getElementById("result");
2const tuikaBtn = document.getElementById("tuikaBtn");
3let tuikanumber = 0;
4
5tuikaBtn.addEventListener('click', function() {
6  const namae = document.getElementById("namae");
7  const nickname = document.getElementById("nickname");
8  
9  const namaeVal = namae.value;
10  const nicknameVal = nickname.value;
11
12  if (namaeVal == "" || nicknameVal == "") return;
13  
14  const response = window.confirm(`${namaeVal}さん（${nicknameVal}）を登録します。よろしいですか？`);
15  
16  if (response) {
17    tuikanumber++;
18    result.textContent = `${namaeVal} ${nicknameVal}`;
19    window.alert(`${namaeVal}さん（${nicknameVal}）にて登録しました。`);
20  } else {
21  	return;
22  }
23
24  if (tuikanumber >= 3) {
25    tuikaBtn.style.visibility = "hidden";
26  }
27});