実現したいこと
テキストボックスで空入力をした時、追加できないようにしたい
発生している問題・分からないこと
問題はテキストボックスが空の状態でも追加を押すと追加される
該当のソースコード
CSS
1ul li {2 list-style: none;3 overflow-wrap: break-word;4 text-align: left;5 display: flex;6}7 8ul li .complete-btn{9 border-radius: 8px;10 background-color: #4D89FF;11 color: white;12 margin-left: auto;13 14} 15 16ul li .complete-btn:hover{17 background-color: #9ACFFF;18 cursor: pointer;19 20 21}22 23ul li .delete-btn{24 border-radius: 8px;25 background-color: #cc3300;26 color: white;27 margin-right: 0;28}29 30ul li .delete-btn:hover{31 background-color: #FF6A6A;32 cursor: pointer;33 34}35 36ul li .return-btn{37 border-radius: 8px;38 background-color: #03D00B;39 color: white;40 margin-left: auto;41}42ul li .return-btn:hover{43 background-color: #95FF99;44 cursor: pointer;45}46
body
1<body> 2 <!-- 入力エリア --> 3 <div class="input-area" > 4 <input id="add-text" placeholder="Todoを入力" /> 5 <button id="add-button">追加</button> 6 </div><!-- input-area --> 7 8 <div class="container"> 9 <!-- 作業中エリア --> 10 <div class="incomp-area"> 11 <p class="area-title">タスク</p> 12 <ul id="incomp-area-list"> 13 </ul> 14 </div><!-- incomp-area --> 15 16 <!-- 完了エリア --> 17 <div class="comp-area"> 18 <p class="area-title">完了</p> 19 <ul id="comp-area-list"> 20 </ul> 21 </div><!-- comp-area --> 22 </div><!-- container --> 23 24 <script src="src/index.js"> 25 const input = document.getElementsByClassName('input-area'); 26 const btn = document.getElementById('add-button'); 27 const incompList = document.getElementById('incomp-area-list'); 28 const compList = document.getElementById('comp-area-list'); 29 30 31 btn.addEventListener('click', e => { 32 e.preventDefault(); 33 if (input.value.length > 0) { 34 const task = addText.value; 35 addTasks(task); 36 addText.value = ''; 37 } 38 }); 39 40 //タスクリストに追加 41 const addTasks = (task) => { 42 const li = document.createElement("li"); 43 inCompList.appendChild(li); 44 li.innerHTML = task; 45 46 47 //タスクリストに追加 48 //btn.addEventListener('click', function() { 49 //const text = document.createTextNode(addText.value); 50 //document.getElementById("add-text").value = ""; 51 //const li = document.createElement('li'); 52 //作成したliタグに入力した値textを追加 53 //li.appendChild(text); 54 //incompList.appendChild(li); 55 56 57 // 完了ボタン 58 const completeBtn = document.createElement('button'); 59 completeBtn.classList.add('complete-btn'); 60 completeBtn.textContent = '完了'; 61 li.append(completeBtn); 62 63 // 削除ボタン 64 const deleteBtn = document.createElement('button'); 65 deleteBtn.classList.add('delete-btn'); 66 deleteBtn.textContent = '削除'; 67 li.append(deleteBtn); 68 69 // 削除ボタンを押した際の処理 70 deleteBtn.addEventListener('click', function() { 71 li.remove(); 72 }); 73 74 // 完了ボタン押した際の処理 75 completeBtn.addEventListener('click', function() { 76 compList.append(li); 77 78 // 完了ボタンと削除ボタンを消す 79 completeBtn.remove(); 80 deleteBtn.remove(); 81 82 // 戻すボタン 83 let returnBtn = document.createElement('button'); 84 returnBtn.classList.add('return-btn'); 85 returnBtn.textContent = '戻す'; 86 li.append(returnBtn); 87 88 // 戻すボタン押した際の処理 89 returnBtn.addEventListener('click', function() { 90 incompList.append(li); 91 92 // 戻すボタンを消す 93 returnBtn.remove(); 94 95 // 完了ボタンと削除ボタン 96 li.append(completeBtn, deleteBtn); 97 }); 98 }); 99 }; 100 101 102 103 104 105 </script> 106</body>
試したこと・調べたこと
上記の詳細・結果
試したこと
クリックイベント時にe.preventDefault();を使用したり、if文で判定文を入力してみたが、変化なしでした。初心者のため、わかりやすくアドバイス頂けたら嬉しいです。
補足
特になし
0 コメント