質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

807閲覧

ジャバ教えてください

akuaaaa

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1グッド

2クリップ

投稿2023/05/23 23:00

ジャバスクリプトの勉強をしており下記の質問でつまずいてしまったのでどなたかご教授お願いします。
名前とニックネームの追加時、各行の右端に削除ボタンを出力しなさい。
ボタンをクリックするとボタンがある行を削除する処理を作成しなさい。

削除ボタンが一つのセルにしか出ず押して処理する方法がわからない状態です。

<!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); 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 targetTuikatbl = document.getElementById("Tuikatbl"); let targetbtn = document.createElement("button"); targetbtn.innerHTML = "削除"; </script> </body>
</html>
shinoharat👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

1・名前とニックネームの追加時、各行の右端に削除ボタンを出す

現状の問題点

javascript 部分を見ると、以下のような構造になっています。

js

1 // ★function 内の処理は「追加ボタンが押されるたびに実行」される 2 function OnButtonClick() { 3 if(!targetnamae.value == "" || !targetnickname.value == ""){ 4 5 // ... 中略 ... 6 7 newCell = newRow.insertCell(); 8 newCell.appendChild(targetbtn); // ← (*2) 一つの削除ボタンを使いまわしている 9 10 // ... 中略 ... 11 12 } 13 } 14 15 // ★以下の処理は「ページを開いたときに一度だけ実行」される 16 let cntn = 0; 17 let targetresult = document.getElementById("result") 18 let targetnamae = document.getElementById("namae"); 19 let targetnickname = document.getElementById("nickname"); 20 let targetBtn = document.getElementById("tuikaBtn"); 21 let targetTuikatbl = document.getElementById("Tuikatbl"); 22 let targetbtn = document.createElement("button"); // ← (*1) 一回しかcreateElementされない 23 targetbtn.innerHTML = "削除";

削除ボタンを createElement している位置 (*1) に注目してください。
追加ボタン押下時の処理( OnButtonClick )の外側で createElement されていますので、このページを開いたとき一度しか削除ボタンが生成されないことになります。
そして、一つしかない削除ボタンを (*2) で appendChild しています。
この場合、画面上では最後に appendChild した削除ボタンのみが表示されることになります。

修正方法

追加ボタンを押すたびに削除ボタンを生成するよう、修正が必要です。

diff

1 function OnButtonClick() { 2 if(!targetnamae.value == "" || !targetnickname.value == ""){ 3 4 // ... 中略 ... 5 6+ // ★追加ボタンを押すたびに、削除ボタンを createElement する。 7+ let targetbtn = document.createElement("button"); 8+ targetbtn.innerHTML = "削除"; 9 10 newCell = newRow.insertCell(); 11 newCell.appendChild(targetbtn); 12 13 // ... 中略 ... 14 15 } 16 } 17 18 let cntn = 0; 19 let targetresult = document.getElementById("result") 20 let targetnamae = document.getElementById("namae"); 21 let targetnickname = document.getElementById("nickname"); 22 let targetBtn = document.getElementById("tuikaBtn"); 23 let targetTuikatbl = document.getElementById("Tuikatbl"); 24- let targetbtn = document.createElement("button"); 25- targetbtn.innerHTML = "削除";

--

2・削除ボタンをクリックするとボタンがある行を削除する

「ボタンがクリックされた」「データが入力された」「キーボードが押された」などの出来事を イベント と呼びます。
イベント が発生した時に処理を行うには addEventListener という命令(メソッド)を使います。

[構文]

js

1// 「要素名」はイベントの発生元。例えば削除ボタンなど。 2// 「イベント名」はイベントの名前。例えば 'click' や 'input' など。 3要素名.addEventListener('イベント名', function(){ 4 // イベント発生時の処理 5});

[コード例]

diff

1 function OnButtonClick() { 2 if(!targetnamae.value == "" || !targetnickname.value == ""){ 3 4 // ... 中略 ... 5 6 let targetbtn = document.createElement("button"); 7 targetbtn.innerHTML = "削除"; 8+ targetbtn.addEventListener('click', function(){ 9+ // ここに「削除ボタンがクリックされたときの処理」を書く 10+ }); 11 12 newCell = newRow.insertCell(); 13 newCell.appendChild(targetbtn); 14 15 // ... 中略 ... 16 17 } 18 }

行の削除は、

js

1targetTuikatbl.deleteRow(行番号);

という命令(メソッド)があるので、それを使うと良いでしょう。
https://developer.mozilla.org/ja/docs/Web/API/HTMLTableElement/deleteRow

押されたボタンと同じ行を削除しなければならないので注意してください。
行番号を取得する方法はMDNのドキュメントから探してみてください。
https://developer.mozilla.org/ja/docs/Web/API/HTMLTableRowElement

投稿2023/05/24 04:04

shinoharat

総合スコア1680

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

akuaaaa

2023/05/24 23:06

めちゃくちゃわかりやすいです。教えていただき本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問