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

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

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

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

Q&A

解決済

2回答

1228閲覧

クリックする度にappendchildで「追加、削除」を繰り返しできるようにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2022/03/01 15:37

編集2022/03/02 22:05

ド素人が練習で予約システムを作っています。

空のテーブル内をクリック

<td value="2022-3-1 7:00~8:00"></td>のvalueの値を取得 <div>内に表示する。

まではできたのですが、もう一度クリックしたら表示されたvalueを消す(戻す)という動作を組むことができません。
クリックした場合、toggleを使って<td>内のbg-colorを変化→戻す作業はできましたが、appendchildで出力した方も同じく消える様にしたいです。よろしくお願い致します。

コードの一番下★★★にappendchild記述部分があります。

追加
1度目のクリック <td>背景に色が付き、<div>内に日時が表示される
2度目のクリック <td>背景色が消え、<div>内に更に同じ日時が表示される
イメージ説明
イメージ説明

<?php for($i=0;$i<7;$i++){ $week = array( "日", "月", "火", "水", "木", "金", "土" ); $date = date("n月j日",strtotime("+{$i} day",strtotime($targetDate)))."\n"; echo '<th>' . $date . '</th>'; } ?> </tr> <?php $link = '<a class="day" >〇</a>'; $keisan =[ $i - 7, $i - 6, $i - 5, $i - 4, $i - 3, $i - 2 , $i - 1, ]; // 予約時間枠を作る為のfor文 for($i=7;$i<21;$i++){ echo'<tr>'; echo '<td>' .$i.':00~'.($i+1).':00 </td>'; foreach($keisan as $k){ $date = date("y-m-d",strtotime("+{$k} day",strtotime($targetDate)))."\n"; // $date = date("n月j日",strtotime($targetDate))."\n"; echo '<td class="link1" name="time" value="'.$date.''.$i.':00~'.($i+1).':00"></td>'; } echo '</tr>'; } ?> </table> <div id="kekka"> </div> for(let i = 0; i < link.length; i++){ link[i].addEventListener('click', function() { this.classList.toggle('clicked'); const kekka = document.getElementById('kekka'); const value = link[i].getAttribute('value'); // console.log(value); // ★★★appendchild // クリックしたマスの日付<td value="22-03-19 12:00~13:00>"を表示する↓ const myp = document.createElement("p"); const text = document.createTextNode(value); myp.appendChild(text); kekka.appendChild(myp); }) }

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

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

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

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

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

guest

回答2

0

tdにvalue属性はあまりおすすめできません。カスタムデータの利用を検討ください
kekkaには本当にappendしたいのでしょうか?常に値を上書きしてはいけませんか?

javascript

1<style> 2.active{ 3 background-Color:aqua; 4} 5</style> 6<script> 7document.addEventListener('click',e=>{ 8 const t=e.target; 9 let v; 10 if(v=t.dataset.value){ 11 const flg=!t.closest('.active'); 12 if(flg) document.querySelector('[data-value].active')?.classList.remove('active'); 13 kekka.textContent=flg?v:''; 14 t.classList.toggle('active'); 15 } 16}); 17</script> 18<table border> 19<tr> 20<th></th> 21<th>3/19</th> 22<th>3/20</th> 23</tr> 24<tr> 25<td>7:00-8:00</td> 26<td data-value="3-18 7:00-8:00"></td> 27<td data-value="3-19 7:00-8:00"></td> 28</tr> 29<tr> 30<td>8:00-9:00</td> 31<td data-value="3-18 8:00-9:00"></td> 32<td data-value="3-19 8:00-9:00"></td> 33</tr> 34<tr> 35<td>9:00-10:00</td> 36<td data-value="3-18 9:00-10:00"></td> 37<td data-value="3-19 9:00-10:00"></td> 38</tr> 39</table> 40<div id="kekka"></div> 41

投稿2022/03/02 00:37

編集2022/03/02 00:38
yambejp

総合スコア114572

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

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

退会済みユーザー

退会済みユーザー

2022/03/02 05:31

回答ありがとうございます! カスタムデータというものがあるんですね! 利用してみます! <td>にvalue属性がおすすめできない理由を、勉強として教えていただきたいですm(__)m appendについて ・会員プラン(値段)によって月に利用できる回数が決まっている(1回 1時間 例:ゴールド会員=8回)。 ・3日に1回(1時間)を少しずつ消化してもよし、空きがあれば1日に8回使用してもよし。 という様なサービスの予約システムを作りたいと思っているので 「空きがあれば連続で3時間使いたい」という希望された際に、予約行程を少なくしたいと考え、この様な仕組みを希望しています。 とはいえド素人なのでそれが可能なのかどうかも分からずに手を付け始めて今に至りますm(__)m
退会済みユーザー

退会済みユーザー

2022/03/02 10:24

value属性について ありがとうございました!早速data-valueに変更しましたm(__)m appendについて まだ条件はつけていません。 現状は、会員プランごとに月間利用回数が設定(DB内)してあり、画面上に「今月はあと○回予約可能です」(例:8回)という数字が表示されています。 枠をクリックするごとに「8→7」と減るようにphp、jsで設定しようと思っています。 (思っているだけです(+o+)) 実際にこの仕組みを使用するかもしれない案件が会員数が40程度に限定された超スモールビジネスの為、とりあえず動けばいいかな…という素人の安易な考えで作り始めてしまいました。 図々しいですが、分からない事があれば質問させて頂きます。勿論自分でも考えながらm(__)m
guest

0

ベストアンサー

スマホで打ったので誤字脱字があるかもです。
指摘して頂いたバグを修正しました。

JavaScript

1// ★★★appendchild 2// クリックしたマスの日付<td value="22-03-19 12:00~13:00>"を表示する↓ 3const ps = kekka.querySelectorAll("p"); // kekkaのpタグを全て取得 4let is_include_value = false; 5let ps_index; 6// pタグの数ループ 7for (let index = 0; index < ps.length; index++) { 8 const p = ps[index]; 9 // pタグのtextがvalueと一致する場合は 10 if(p.textContent == value) { 11 is_include_value = true; // valueと同じtextのpタグがあればtrue 12 ps_index = index; // 何番目の子要素か保存 13 } 14} 15 16// valueと同じtextのpタグがあれば 17if(is_include_value) { 18 // 削除処理 19 kekka.removeChild(ps[ps_index]); 20} else { 21 // 新規作成 22 const myp = document.createElement("p"); 23 const text = document.createTextNode(value); 24 myp.appendChild(text); 25 kekka.appendChild(myp); 26} 27

投稿2022/03/01 16:22

編集2022/03/02 13:05
mineralwater

総合スコア289

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

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

退会済みユーザー

退会済みユーザー

2022/03/01 17:04

スマホでご丁寧にありがとうございますm(__)m 試した結果 Cannot read properties of undefined (reading 'add') at HTMLTableCellElement.<anonymous>が出てきました。 すごく解決しそうに見えるのですが、ド素人の私には分かりません。 勿論自分でも頂いた回答を元に色々と試してみるのでまたお時間があれば返信お願い致します↓↓ for(let i = 0; i < link.length; i++){ ~~~~ ~~~~ ~~~~ ~~~~ ★★★から下↓の const myp = document.createElement("p"); const text = document.createTextNode(value); myp.appendChild(text); kekka.appendChild(myp); 部分をコメントアウトし、教えていただいたコードを追加(入れ替え)すればいいのでしょうか?
退会済みユーザー

退会済みユーザー

2022/03/01 17:16

classlist.add ↓ classList.addでできました!ありがとうございます!! ご回答頂いた「誤字脱字」と、エラーの「未定義」がつながりましたm(__)m
mineralwater

2022/03/01 17:20

入れ替えすれば大丈夫です。 また、 Cannot read properties of undefined (reading 'add') at HTMLTableCellElement.<anonymous> というエラーが出る件ですが、回答に誤字があったため出ていたエラーでした。 回答を修正しましたので新しい回答のコードを入れ替えでしてみてください。
mineralwater

2022/03/01 17:32

もう一回脱字を発見したので、修正いたしました。
退会済みユーザー

退会済みユーザー

2022/03/01 17:32

申し訳ありません、ちょっと自分の希望の動きと違っていました! 質問力が足りなかったです! 画像を追加させていただきます。 希望の動きは 1,クリックしたら<td>のvalueが下に表示される 2,他のマスをクリックしたら、そのマスのvalueが更に1の下に表示される ここまで 1,2と、二つの<p>が表示されている & マスが青くなっている状態 3,1を再度クリックすると、マスの色が戻り、1の<p>も消える という様な形にしたいです。 何度も申し訳ありませんが、よろしくお願い致しますm(__)m という動きにしたいと思っています。
mineralwater

2022/03/01 17:33

もう一箇所脱字があったため、解答を修正致しました。
mineralwater

2022/03/01 17:40

こちらこそすみません。 質問の実装したい挙動の解釈が間違っていました。 画像助かります。
退会済みユーザー

退会済みユーザー

2022/03/01 17:49 編集

画像2つ目の様に、2つ目をクリックすると、1つ目の<p>が消えてしまいます。 ※黄色はただのマウスホバーなので関係ありません。 マスをクリック 色が水色に変わる & <td>内のvalueが<p>で表示される 他のマスをクリック 色が水色に変わる & 最初の<p>の下に2つ目の<p>が追加される 水色のマスをクリック 空白に戻る & <p>が消える という感じが希望です。何度も申し訳ありません、お時間がある時で構いませんのでまたよろしくお願い致しますm(__)m
mineralwater

2022/03/01 18:06

回答を編集いたしました。 デバッグしてないのでバグがあるかもしれません。その場合はまた連絡お願いします。
退会済みユーザー

退会済みユーザー

2022/03/02 05:13

何度もありがとうございます! 試してみたところ、エラーが出ました。 Uncaught TypeError: ps.removeChild is not a function at HTMLTableCellElement.<anonymous> (yoyaku2.php?date= 2022-03-15:333:8) 今回はタイプミスではないと思うのですが… removeChildの引数でしょうか? 素人の為全く分かりません(T_T)
退会済みユーザー

退会済みユーザー

2022/03/02 11:58

できました~!!! ps.removeChild(ps[ps_index]); これが↓↓ kekka.removeChild(ps[ps_index]); で動きました!(^^)! 親.removeChild(消される子) という使い方なんですね! 大変勉強になりましたm(__)m自分ではこのfor文とif文はとても組めません。 if文の中のlengthの使い方等が意味不明だったのですが、長さではなくPの数なんですねw 3時間にらめっこして少しづつ解読できてきましたw
mineralwater

2022/03/02 12:20

すみません ps.removeChild(ps[ps_index]); が間違っている事に指摘されて気づきました。 こちらこそ勉強になりました。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問