javascriptの実装

実現したいこと

名前とニックネームを3回追記したらボタンを非表示にし、登録した名前とニックネームを最大3人分までテーブル表示できるようにしなさい。

発生している問題・エラーメッセージ

エラーメッセージこそないものの3人まで追加という条件が解決できません。

該当のソースコード

Javascript


var namae = document.getElementById("namae");
var nickname = document.getElementById("nickname");
var tuikaBtn = document.getElementById("tuikaBtn");

setInterval(() => {
	tuikaBtn.disabled = !namae.value || !nickname.value;
});







(function() {
  'use strict';

  function main() {
    const table = makeTable();
    const tbody = table.querySelector('tbody');
    setAddButton(tbody);
    setRemoveButton(tbody);
  }

  function makeTable() {
    const result = document.getElementById('result');
    const table = document.createElement('table');
    const thead = document.createElement('thead');
    const tbody = document.createElement('tbody');
    const tr = document.createElement('tr');
    const th1 = document.createElement('th');
    const th2 = document.createElement('th');

    th1.textContent = '名前';
    th2.textContent = 'ニックネーム';   

    tr.append(th1, th2);
    thead.append(tr);
    table.append(thead, tbody);
    result.append(table);

    return table;
  }

  function setAddButton(tbody) {
    const nameInput = document.getElementById('namae');
    const nicknameInput = document.getElementById('nickname');
    const addButton = document.getElementById('tuikaBtn');

    addButton.addEventListener('click', function() {
      if (nameInput.value === '' && nicknameInput.value === '') return;

      const tr = document.createElement('tr');
      const td1 = document.createElement('td');
      const td2 = document.createElement('td');

      td1.textContent = nameInput.value;
      td2.textContent = nicknameInput.value;

      tr.append(td1, td2);
      tbody.append(tr);
    });
  }

  function setRemoveButton(tbody) {
    const removeButton = document.getElementById('button-remove');

    removeButton.addEventListener('click', function() {
      const lastTr = tbody.querySelector('tr:last-child');
      if (lastTr == null) return;
      lastTr.remove();
    });
  }

  document.addEventListener('DOMContentLoaded', main);
}());

HTML


<!DOCTYPE html>
<html>
    <head>
        <title>アカウント登録</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
          .base {
            margin: 2% 7% 0;
            height: 500px;
            background: blue;
            padding: 5% 10%;
            box-shadow: 5px 9px 8px 5px rgba(0, 0, 0, 0.5);
          }
          input {
            width: 300px;
            height: 40px;
            font-size: large;
          }
          #tuikaBtn {
            background: green;
          }
          h1 {
            font-family: serif;
          }
          .form-control::placeholder {
              color: #cacaca;
              opacity: 1;
          }
          table {
            border-collapse: collapse; 
          }

          th,td {
            border: 1px solid #312929;
            padding: 5px 10px;
          }
          .card {
            width: 100%;
            height: 350px;
          }
          .back{
            padding: 30px;
            position: absolute;
            bottom: 0;
            right: 0;
          }
          .form-group{
            margin: 10px 0 15px 0px;
          }
          #result {
            font-size: 120%;
            margin: 10;
            margin: 10px 20px;
            padding: 10px 5px 20px;
            margin: 10px 5px 10px 5px;
          }

          .row .card{
            color: red;
          }

          .card{
            color: blue;
            display: block;
            position: relative;
          }

          #modal{
            display: none;
            margin:1.5em auto 0;
            background-color: white;
            border: 1px solid black;
            width: 50%;
            padding: 10px 20px;
            position: fixed;
            border-radius: 5px;
          }

          #overLay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 120%;
            background-color: rgba(0,0,0,0.75);
          }

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

                </form>
                <div id="tuikaMoto">

                </div>
                <div id="result"></div>
              </div>
            </div>
          </div>  
        </div>
      <div id="overLay">
      </div>
      <script src="test.js"></script>
    </body>
</html>

試したこと

参考文献など探しましたが、中々見つからずどなたかご教授お願い致します。
宜しくお願い致します。

meg_

2023/03/03 12:37

> エラーメッセージこそないものの3人まで追加という条件が解決できません。何人までなら追記＆表示出来るのですか？

Zuishin

2023/03/03 23:52

二年やっても調べ方がわからない理由を知りたいですが、どういう学習方法をしていますか？もしかすると効率を数十倍から数百倍に上げる方法を教えられるかもしれません。

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

回答1件

javascript
1<script>
2'use strict';
3const e_input = new CustomEvent("HTMLEvents");
4e_input.initEvent('input', true, true );
5
6document.addEventListener('input',()=>{
7  tuikaBtn.disabled = namae.value=="" ||  nickname.value=="";
8});
9
10window.addEventListener('DOMContentLoaded', ()=>{
11  const max=3;
12  document.dispatchEvent(e_input);
13  tuikaBtn.addEventListener('click',()=>{
14    let tbl=document.querySelector('#tbl');
15    if(!tbl){
16      tbl=tmp.content.querySelector('#tbl').cloneNode(true);
17      result.appendChild(tbl);
18    }
19    if(tbl.querySelectorAll('tbody tr').length<max){
20      const tr=[namae,nickname]
21        .map(x=>Object.assign(document.createElement('td'),{textContent:x.value}))
22        .reduce((x,y)=>(x.appendChild(y),x),document.createElement('tr'));
23      tbl.querySelector('tbody').appendChild(tr);
24    }
25  });
26});
27</script>
28<template id="tmp">
29<table id="tbl">
30<thead><tr><th>名前</th><th>ニックネーム</th></tr></thead>
31<tbody></tbody>
32</table>
33</template>
34
35<div><input id="namae" name="namae"></div>
36<div><input id="nickname" name="nickname"></div>
37<div><input id="tuikaBtn" type="button" name="touroku" value="追加">
38</div>
39<div id="result"></div>