Javascript教えていただきたいです

Javascriptの勉強中で下記問がわからずなかなか次に進めないので詳しい方ご教授お願いいたします。

データを3件登録して追加ボタンを消すようにしたが、削除ボタンでデータが削除され3件未満になった場合は追加ボタンを再表示させ、3件になるまで追加し直せるようにしなさい。

<!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="追加" onclick="OnButtonClick();">
                </div>

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

            </div>
            <div id="result">
	<table id="Tuikatbl">
	</table>	
	</div>
          </div>
        </div>
      </div>  
    </div>
  </div>
  <div id="overLay">
  </div>
    <script>
 	function OnButtonClick() {
		if(!targetnamae.value == "" || !targetnickname.value == ""){
			var res　= confirm(targetnamae.value + "さん"  + targetnickname.value　+ "を登録します。よろしいですか？");
			if(res == true){

  
				
				let newRow = targetTuikatbl.insertRow();

				let newCell = newRow.insertCell();
				let newText = document.createTextNode(targetnamae.value);
				newCell.appendChild(newText);

				newCell = newRow.insertCell();
				newText = document.createTextNode(targetnickname.value);
				newCell.appendChild(newText);

      let targetbtn = document.createElement("button");
			targetbtn.innerHTML = "削除";
          // ここに「削除ボタンがクリックされたときの処理」を書く
          targetBtn.addEventListener(`click`,function(){
            targetTuikatbl.deleteRow();
          });




                newCell = newRow.insertCell();
				newCell.appendChild(targetbtn);
		
				
				alert(targetnamae.value + "さん"  + targetnickname.value　+ "にて登録しました");
				cntn++;
				if(cntn == 3){
					targetBtn.style.display ="none"; 
				}
			}
		}
    }



        	let cntn = 0; 
 		let targetresult = document.getElementById("result")
      	let targetnamae = document.getElementById("namae");
	let targetnickname = document.getElementById("nickname");
	let targetBtn = document.getElementById("tuikaBtn");
let targetBtn1 = document.getElementById("tuikaBtn");
let targetBtn2= document.getElementById("tuikaBtn");
	let targetTuikatbl = document.getElementById("Tuikatbl");	
 
    	
    </script>
</body>

</html>

見にくくてごめんなさい

int32_t

2023/05/30 23:29

どこまでできていて、どこからわかりませんか? コードに 3 という数字は見えるので、まったくできてないわけではないのですよね。コードのインデントをまともにしていただけると、コードが読みやすくなり回答する気になる人も増えると思います。コード全体を「```html」の行と「```」の行で囲ってください。

Zuishin

2023/05/31 00:16

> 下記問がわからずなかなか次に進めないので答えを教えてもらって次に進んでもそこで壁にぶつかるだけだと思いますが。

y_waiwai

2023/05/31 00:22

このままではコードが読みづらいので、質問を編集し、</>(コードの挿入)ボタンを押し、出てくる’’’の枠の中にコードを貼り付けてください

m.ts10806

2023/05/31 00:43

タイトルは要件を記載してください。現状だと質問タグにある内容しかありません。

退会済みユーザー

2023/05/31 01:00 編集

見たとこ研修の課題とか学校の課題・宿題のようですが、そうなんですか？　もしそうであれば講師・先生に聞きましょう。ここで課題の答えを聞くのは筋違いです。 https://teratail.com/help/avoid-asking "学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません"

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

回答1件

ロジック的にはこんな感じで

javascript
1<script>
2const OnButtonClick=()=>{
3  Tuikatbl.querySelector('tbody').appendChild(
4    [
5      document.createTextNode(document.querySelector('[name=namae]').value),
6      document.createTextNode(document.querySelector('[name=nickname]').value),
7      Object.assign(document.createElement("button"),{textContent:"削除",type:"button",className:"del"}),
8      ].reduce((x,y)=>(x.appendChild([y].reduce((x,y)=>(x.appendChild(y),x),document.createElement('td'))),x),document.createElement('tr'))
9    );
10}
11document.addEventListener('click',({target})=>{
12  if(target.matches('.del')) target.closest('tr').remove();
13  if(target.matches('#tuikaBtn')) OnButtonClick();
14  tuikaBtn.toggleAttribute('hidden',Tuikatbl.querySelector('tr:nth-child(3)'));
15});
16</script>
17<form id="form-area" class="form-inline" method="post">
18<div class="input-group"><input id="namae" name="namae" type="text" class="form-control" placeholder="名前"></div>
19<div class="input-group"><input id="nickname" name="nickname" type="text" class="form-control" placeholder="ニックネーム"></div>
20<div class="form-group"><input id="tuikaBtn" type="button" name="touroku" value="追加"></div>
21</form>
22<div id="tuikaMoto">
23</div>
24<div id="result">
25<table id="Tuikatbl">
26<tbody></tbody>
27</table>	
28<div id="overLay">
29</div>
30</div>