実現したいこと
・テキスト内に文字を入力して、「追加」を押すと入力した文字がタスク内へ移動と同時に、
「完了」と「削除」のボタンが出現。
・「削除」をクリックすると、テキストが削除される。
・「完了」をクリックする場合だと右の完了エリアへ移動して、「戻す」ボタンが出現。
・「戻す」をクリックすると、左のタスクエリアへ戻ってきて、「完了」と「削除」のボタンが出現。
前提
入力されたものがタスク内へ移動し、「完了」「削除」をクリック時のイベントは動作確認できてますが、
「戻す」をクリックして、左のタスクエリア内へ戻ってきたテキストについて、
「完了」「削除」をクリックしても、イベントが起きません。
検証ツールでは、エラーメッセージは出ておりません。
該当のソースコード
html
1<!DOCTYPE html>2<html>3<head>4 <meta charset="UTF-8">5 <link rel="stylesheet" href="src/base.css">6 <title>Todoリスト</title>7</head>8<body> 9 <!-- 入力エリア -->10 <div class="input-area">11 <input id="add-text" placeholder="Todoを入力" />12 <button id="add-button" onclick="onClickAdd()">追加</button>13 </div><!-- input-area -->14 15 <div class="container">16 <!-- 作業中エリア -->17 <div class="incomp-area">18 <p class="area-title">タスク</p>19 <ul id="incomp-area-list">20 </ul>21 </div><!-- incomp-area -->22 23 <!-- 完了エリア -->24 <div class="comp-area">25 <p class="area-title">完了</p>26 <ul id="comp-area-list">27 </ul>28 </div><!-- comp-area -->29 </div><!-- container -->30 31 <script src="src/index.js"></script>32</body>33</html>
css
1body {2 font-family: sans-serif;3}4 5input {6 border-radius: 8px;7 border: none;8 padding: 6px 16px;9 outline: none;10 width: 240px;11}12 13button {14 border-radius: 16px;15 border: none;16 margin: 8px;17 padding: 4px 16px;18}19button:hover {20 background-color: #ff7fff;21 color: #fff;22 cursor: pointer;23}24 25.input-area {26 background-color: #c1ffff;27 height: 44px;28 margin: 8px;29 padding: 8px;30 border-radius: 8px;31}32 33.container {34 display: flex;35}36 37.incomp-area {38 background-color: #c6ffe2;39 width: 50%;40 min-height: 200px;41 margin: 8px 0 8px 8px;42 padding: 8px;43 border-radius: 8px;44 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);45}46 47.comp-area {48 background-color: #ffffe0;49 width: 50%;50 min-height: 200px;51 margin: 8px;52 padding: 8px;53 border-radius: 8px;54 box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 4px rgba(0, 0, 0, 0.25);55}56 57.area-title {58 text-align: center;59 padding-bottom: 8px;60 margin-top: 0;61 font-weight: bold;62 color: #666;63 border-bottom: solid 1px black;64}65.incomp-area-list-detail{66 display: flex;67 justify-content: center;68 align-items: center;69}70.incomp-area-list-detail>button:nth-of-type(1){71 margin-left: auto 72}73ul{74 padding-left:075}76 77ul li {78 list-style: none;79 overflow-wrap: break-word;80}81ul li .complete-btn{82 border-radius: 8px;83 background-color: #4D89FF;84 color: white;85}86ul li .complete-btn:hover{87 background-color: #9ACFFF;88 cursor: pointer;89}90 91ul li .delete-btn{92 border-radius: 8px;93 background-color: #cc3300;94 color: white;95}96ul li .delete-btn:hover{97 background-color: #FF6A6A;98 cursor: pointer;99}100 101ul li .return-btn{102 border-radius: 8px;103 background-color: #03D00B;104 color: white;105}106ul li .return-btn:hover{107 background-color: #95FF99;108 cursor: pointer;109}110
javascript
1const form = document.getElementById("add-text");2const btn = document.getElementById("add-button");3const element = document.getElementById('incomp-area-list');4const element2 = document.getElementById('comp-area-list');5 6const onClickAdd = () => {7 const value = form.value;8 console.log(value);9 let li = document.createElement('li');10 li.textContent = value;11 element.appendChild(li);12 form.value = '';13 let btn = document.createElement('button');14 btn.textContent = '完了'15 li.appendChild(btn);16 btn.classList.add('complete-btn');17 let btn2 = document.createElement('button');18 btn2.textContent = '削除';19 li.appendChild(btn2);20 btn2.classList.add('delete-btn');21 console.log('テキスト追加')22 let btn3 = document.createElement('button');23 // /完了ボタン押した時/ 24 btn.addEventListener('click', changeSwitch);25 function changeSwitch() {26 element2.appendChild(li);27 btn.remove();28 btn2.remove();29 // let btn3 = document.createElement('button');30 btn3.textContent = '戻す';31 li.appendChild(btn3);32 btn3.classList.add('return-btn');33 console.log('完了ボタンクリック');}34 // 戻すボタン押した時35 btn3.addEventListener('click', changeSwitch2);36 function changeSwitch2() {37 btn3.remove();38 element.appendChild(li);39 console.log('戻すクリック');40 let btn = document.createElement('button');41 btn.textContent = '完了'42 li.appendChild(btn);43 btn.classList.add('complete-btn');44 let btn2 = document.createElement('button');45 btn2.textContent = '削除';46 li.appendChild(btn2);47 btn2.classList.add('delete-btn');}48 // }}49 // 削除ボタン押した時50 btn2.addEventListener('click', deleteSwitch);51 function deleteSwitch() {52 li.remove();53 console.log('削除ボタン');54 }55 56}
試したこと
javascript内の37行目〜47行目までを削除して、ifを使用したコードを記述しましたが、
エラーは出ていないものの、戻した後のクリックイベントが起きませんでした。
調べても、解決策のヒントが見つかりませんでしたので、
質問させていただきました。
if (btn3.classList.contains('return-btn') == true) { console.log('ggg'); btn3.remove(); element.appendChild(li); let btn = document.createElement('button'); btn.textContent = '完了' li.appendChild(btn); btn.classList.add('complete-btn'); let btn2 = document.createElement('button'); btn2.textContent = '削除'; li.appendChild(btn2); btn2.classList.add('delete-btn'); } else { console.log('g'); changeSwitch(); deleteSwitch(); }
0 コメント