Skip to main content
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
Communityユーザーがトップに表示した
本文に 2 文字追加; タイトルを編集
ソース リンク
cubick
  • 2.1万
  • 5
  • 27
  • 64

名前とニックネームを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]


  [1]: https://i.sstatic.net/BfCnl.png

現在

名前とニックネームを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]


  [1]: https://i.sstatic.net/BfCnl.png

名前とニックネームを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>

現在

ソース リンク

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

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]


  [1]: https://i.sstatic.net/BfCnl.png