

javascriptを学習しております。  
名前とニックネームを3回追記したらボタンを非表示にし、それ以降は追記できないようにしたいです。  
3回目以降は追記できないようにしましたが、ボタンを非表示にできておりません。  
また、tableタグとそれに関連するタグを利用し、追記した 名前 と ニックネーム
を最大3人分までテーブル表示できるようにしなさい。データを3件追記して追加ボタンを消すようにしたが、削除ボタンでデータが削除され3件未満になった場合は追加ボタンを再表示させ、3件になるまで追加し直せるようにしなさい。これらの条件も同時に満たす必要がありますが、満たしていると思われます。  
どなたかご教授宜しくお願いいたします。

[code]

    <!DOCTYPE html>
    <html>
        <head>
            <title>アカウント登録</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
        <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>
                        <table id="result-table">
                          <thead>
                          <tr>
                          <th>名前</th>
                          <th>ニックネーム</th>
                          <th>削除</th>
                          </tr>
                          </thead>
                          </table>
                          
                    </form>
                    <div id="tuikaMoto">
    
                    </div>
                    <div id="result"></div>
                  </div>
                </div>
              </div>  
            </div>
          </div>
          <div id="overLay">
          </div>
    
    <script>
      class NameTable {
    constructor() {
    this.data = [];
    this.table = document.getElementById('result-table');
    this.tbody = this.table.createTBody();
    this.btn = document.getElementById("tuikaBtn");
    this.input_namae = document.getElementById("namae");
    this.input_nickname = document.getElementById("nickname");
    }
    
    handleEvent(e) {
    if (e.target === this.btn) {
    const name_value = this.input_namae.value,
    nickname_value = this.input_nickname.value;
    if (this.checkTsuika(name_value, nickname_value)) {
    this.pushData(name_value, nickname_value);
    this.createTable();
    };
    } else if (e.target.matches('.del')) {
    this.clickDel(e.target);
    }
    }
    
    pushData(name, nickname) {
    /* DBなどに追加する場合は、ここでfetchなどで通信 */
    this.data.push({ name: name, nickname: nickname });
    window.alert(`「[${name}]さん[${nickname}]にて登録しました。」`);
    this.input_namae.value = '';
    this.input_nickname.value = '';
    if (this.data.length > 2) {
    Object.assign(this.btn, {
      value: '',
      disabled: true,
    
    });
    }
    }
    
    createTable() {
    while (this.tbody.firstChild) {
    this.tbody.removeChild(this.tbody.firstChild);
    }
    this.data.forEach(d => {
    const tr = this.tbody.insertRow(-1);
    tr.insertCell(0).appendChild(document.createTextNode(d.name));
    tr.insertCell(1).appendChild(document.createTextNode(d.nickname));
    const input_del = document.createElement('input');
    Object.assign(input_del, {
    type: 'button',
    value: '削除',
    className: 'del',
    });
    tr.insertCell(2).appendChild(input_del);
    });
    }
    
    checkTsuika(name, nickname) {
    if (name === "" || nickname === "") {
    
    return false;
    }
    if (!this.data.every(d => d.name !== name)) {
    
    return false;
    }
    return window.confirm(`「[${name}]さん[${nickname}]を登録します。よろしいですか？」`);
    }
    
    clickDel(target) {
    /* fetchなどで削除を送信 */
    
    const dels = [...this.tbody.querySelectorAll('.del')];
    this.data = this.data.filter((_, i) => dels[i] !== target);
    this.createTable();
    Object.assign(this.btn, {
    value: '追加ボタン',
    disabled: false,
    });
    }
    }
    
    // 実行
    window.addEventListener('DOMContentLoaded', () => {
    const table = new NameTable();
    document.addEventListener('click', table, false);
    });
    
    </script>
        </body>
    </html>
    
[/code]

[![現在](https://i.stack.imgur.com/BfCnl.png)](https://i.stack.imgur.com/BfCnl.png)


CC BY-SA 4.0
2022-05-29T11:09:17.547
89120
2023-09-05T09:07:20.927
2022-05-29T11:13:19.597
3060
52850
question
javascript
名前とニックネームを3回追記したらボタンを非表示にし、それ以降は追記できないようにしたい


`Object.assing`でボタンに設定している部分でボタンの表示/非表示を切り替えようとしているのだと解釈しましたが、ボタン自体を消したいのではないのでしょうか？  
消すのであれば

[code]

    this.btn.style.display ="none";
    
[/code]

もしくはボタンのあった位置を残したいのであれば

[code]

    this.btn.style.visibility ="hidden";
    
[/code]

が使えます。

今回は消したり出したりしたいわけですから、`visbility`を使う方が向いていると思います。  
消したボタンを表示したい場合

[code]

    this.btn.style.visibility ="visible";
    
[/code]

とやれば表示されます。


CC BY-SA 4.0
2022-05-29T13:21:47.623
89122
2022-05-29T13:21:47.623
9515
89120
answer