inflearn logo
강의

講義

知識共有

JavaScript:基礎から本番までのオールインワン

アイテムフィルタリング

TO DO LIST

358

lovekjs0105

投稿した質問数 9

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

 

무슨 실수를 했는지 한번 확인해주실수 있을까요??ㅜㅜ

let taskInput = document.getElementById('task-input'); let addButton = document.getElementById('add-button'); let tabs = document.querySelectorAll('.task-tabs div'); let taskList = []; let mode = 'all'; let filterList = []; addButton.addEventListener('click', addTask); for (let i = 1; i < tabs.length; i++) { tabs[i].addEventListener('click', function (event) { filter(event); }); } function addTask() { let task = { id: randomIdGenerate(), taskContent: taskInput.value, isComplete: false, }; taskList.push(task); render(); } function render() { let list = []; if (mode == 'all') { list = taskList; } else if (mode == 'ongoing' || mode == 'done') { list = filterList; } } let resultHTML = ''; let list = []; for (let i = 0; i < list.length; i++) { if (list[i].isComplete == true) { resultHTML += `<div class="task" id="${list[i].id}"> <div class ="task-done">${list[i].taskContent}</div> <div> <button onclick="toggleComplete('${list[i].id}')">Check</button> <button onclick="deleteTask('${list[i].id}')">Delete</button> </div> </div>`; } else { resultHTML += `<div class="task" id="${list[i].id}"> <div>${list[i].taskContent}</div> <div> <button onclick="toggleComplete('${list[i].id}')">Check</button> <button onclick="deleteTask('${list[i].id}')">Delete</button> </div> </div>`; } } document.getElementById('task-board').innerHTML = resultHTML; function toggleComplete(id) { for (let i = 0; i < taskList.length; i++) { if (taskList[i].id == id) { taskList[i].isComplete = !taskList[i].isComplete; break; } } render(); console.log(taskList); } function filter(event) { mode = event.target.id; let filterList = []; if (mode == 'all') { render(); } else if (mode == 'ongoing') { for (let i = 0; i < taskList.length; i++) { if (taskList[i].isComplete == false) { filterList.push(taskList[i]); } } render(); } else if (mode == 'done') { for (let i = 0; i < taskList.length; i++) { if (taskList[i].isComplete == true) { filterList.push(taskList[i]); } } render(); } } console.log(filterList); function randomIdGenerate() { return (performance.now().toString(36) + Math.random().toString(36)).replace( /\./g, '' ); } function deleteTask(id) { for (let i = 0; i < taskList.length; i++) { if (taskList[i].id == id) { taskList.splice(i, 1); break; } } render(); }

javascript HTML/CSS

回答 1

0

codingnuna10082706

안녕하세요

어떤 에러가 났는지 에러메세지와 코드를 읽기쉽게 정리해서 올려주시면 감사하겠습니다 글작성시 상단 툴바에 </> 이렇게 생긴 코드를 선택하시면 코드 보이는 그대로 붙여넣기해서 올려주실 수 있습니다!

반복문 문제3 369게임

0

463

1

투두리스트 과제 힌트 좀 주세요 ㅠ

0

389

1

강의가 재생이 안됩니다.

0

417

2

강의 정리된 자료

0

410

1

타임즈뉴스 401에러

0

355

1

to do list

0

319

1

EventListener 질문입니다.

0

266

1

developer tool 아이콘 클릭했는데 콘솔창이 안떠요

0

254

1

git 허브나 netlify 용량

0

1250

1

깃허브 오류

0

366

1

Math 함수를 사용해봤는데. ... 은 무슨 의미일까요??

0

429

1

로컬스토리지 저장하는 방법 알려주세요 ㅠㅠ

0

862

1

타임즈 render 부분 질문

0

433

1

인프런 블로그 작성

1

488

1

전날엔 되던것이 담날엔 안되네요 ㅜㅜ

0

426

1

뉴욕타임즈 뉴스를 그려보자 reder편 질문

0

396

1

TO DO LIST

0

435

1

es6 7번 문제에 관하여 질문사항 있습니다.

0

326

1

node.js 로 웹서버 구축할때 힘들었는데 넷리파이로 이렇게 쉽게 웹서버가 만들어지다니.. 감동입니다. 항상 서버도 살아있고 깃헙이랑 동기화되는게 장점인것같아요

0

415

0

함수강의 연습문제 6번 질문사항

0

254

1

let gameOver = false;

0

252

1

api 호출 관련해서 Usage 가 50이라...

0

413

1

map이 안먹습니다.. ㅠㅠㅠ

0

364

2

"Postman" 앱이 더 이상 지원되지 않습니다.

0

810

1