実現したいこと
To do リストを作成する際に、inputエリアが空入力の場合はリストへの追加処理を制御するように設定したい。
発生している問題・分からないこと
if文でvalueの値が空の場合はボタンが機能しないようになど試しましたが、それだとボタンが機能しなくなってしまい結局リストには空のまま追加されてしまう。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <link rel="stylesheet" href="src/base.css"> 6 <title>lesson08 Todoリスト</title> 7</head> 8<body> 9 <!-- 入力エリア --> 10 <div class="input-area"> 11 <input id="add-text" placeholder="Todoを入力" /> 12 <button id="add-button">追加</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.imcomp-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}
JavaScript
1const input = document.getElementById('add-text');2const btn = document.getElementById('add-button');3const incompList = document.getElementById('incomp-area-list');4const compList = document.getElementById('comp-area-list');5 6 //追加ボタンを押した際の処理7btn.addEventListener('click', function() {8 const li = document.createElement('li');9 li.classList.add('list-detail');10 const span = document.createElement('span');11 span.classList.add('text');12 span.textContent = input.value;13 input.value = '';14 li.appendChild(span);15 incompList.appendChild(li);16 if(input.value == "") {17 btn.disabled = true;18 }19 20 // 完了ボタンを付与21 const completeBtn = document.createElement('button');22 completeBtn.classList.add('complete-btn');23 completeBtn.textContent = '完了';24 li.appendChild(completeBtn);25 26 // 削除ボタンを付与27 const deleteBtn = document.createElement('button');28 deleteBtn.classList.add('delete-btn');29 deleteBtn.textContent = '削除';30 li.appendChild(deleteBtn);31 32 // 削除ボタンを押した際の処理33 deleteBtn.addEventListener('click', function() {34 li.remove();35 });36 37 // 完了ボタン押した際の処理38 completeBtn.addEventListener('click', function() {39 compList.appendChild(li);40 41 // 完了ボタンと削除ボタンを消す42 completeBtn.remove();43 deleteBtn.remove();44 45 // 戻すボタンを付与46 let returnBtn = document.createElement('button');47 returnBtn.classList.add('return-btn');48 returnBtn.textContent = '戻す';49 li.appendChild(returnBtn);50 51 // 戻すボタン押した際の処理52 returnBtn.addEventListener('click', function() {53 incompList.appendChild(li);54 55 // 戻すボタンを消す56 returnBtn.remove();57 58 // 完了ボタンと削除ボタンを再表示59 li.append(completeBtn, deleteBtn);60 });61 });62});
試したこと・調べたこと
上記の詳細・結果
空入力でもリストに追加されてしまう。そして一つ追加されると、その後追加ボタンが押せなくなってしまう。
補足
特になし
0 コメント