0

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

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

現在

1
  • 1
    teratail.com/questions/rpj63ol2zh49mp <= マルチポストだよね? そちらで回答が付いているのにそれにフィードバックしてないのはどういうこと? ここでも同じことになるのかな?
    – WebSurfer
    Commented 2022年5月29日 13:39

1 件の回答 1

1

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

this.btn.style.display ="none";

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

this.btn.style.visibility ="hidden";

が使えます。

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

this.btn.style.visibility ="visible";

とやれば表示されます。

2
  • this.btn.style.visibility ="visible";こちらを使って画像のように3件になった時に表示できないようになりました。3件になったらhiddenのように追加ボタンが消えたり、3件になるまで追加ボタンを表示させたりするにはどのように記述すべきでしょうか。
    – ssski0502
    Commented 2022年5月30日 3:26
  • いろいろやり方はあると思いますが、画面だけで実行するのであれば、tableで表示している行数をどこかで覚えておいて、追加処理の時に行数が3行に達したら、hidden,削除時に行数が2行以下になったらvisibleに切り替えればよいと思います。データベースから値を取ってくるのであれば、クエリでヒットした行数を使っても良いでしょう。 Commented 2022年5月30日 4:03

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。