- Django Rest Framework
Front JS CRUD
# 1. 2022.11.10 - [woncoding/TIL] - TIL | 11.9.수 [DRF ↔️ JS CRUD ]
TIL | 11.9.수 [DRF ↔️ JS CRUD ]
- Django Rest Framework Front JS CRUD [index.html] JS CRUD JS CRUD 2 JS CRUD 3 id는 class처럼 여러 element에 적용될 수 없음 첫 내용 둘 내용 셋 내용 [index.js] console.log("index 로딩 완료") // DOM //변수 : const , var, let // 1.
wonprogrammer.tistory.com
# 2. 2022.11.14 - [woncoding/TIL] - TIL | 11.11.금 [DRF ↔️ JS CRUD ]
TIL | 11.11.금 [DRF ↔️ JS CRUD ]
- Django Rest Framework Front JS CRUD [index.html] # 1 JS CRUD JS CRUD 2 JS CRUD 3 # 2, # 4 첫 내용 둘 내용 셋 내용 # 3 버어트은 # 6 입력 완료 # 5 첫 내용 둘 내용 셋 내용 [index.js] console.log("index 로딩 완료") // DOM //변
wonprogrammer.tistory.com
👉 To Do List 와 비슷하게 내가 할일을 적고, 완료한 List는 취소선이 표기되도록 만들었다.
여기서, 문제점은
- .js 파일에서 추가 시켜준 li태그는 html에서 정의된 내용과 다르게 취소선 표기가 되지않는다.
- ↓ 그래서, 아래의 index2 파일들에서 상세하게 살펴보자! ↓
[index2.html]
<body>
<h1> JS CRUD </h1>
<!-- id는 class처럼 여러 element에 적용될 수 없음 -->
<div class="divplace">
# 6
<input type="text" id="todo_item_input" placeholder="To Do List">
<button onclick="toDoAddItem()">입력 완료</button>
<ul id="my_list">
<li class="list_item" id="'first-item" onclick="handleSingleClick(this)"> 첫 내용 </li>
<li class="list_item" id="'second-item" onclick="handleSingleClick(this)"> 둘 내용 </li>
<li class="list_item" id="'third-item" onclick="handleSingleClick(this)"> 셋 내용 </li>
# 7
</ul>
</div>
<script src="index2.js"></script>
</body>👉 li 태그를 계속해서 .js에서 받아와서 html에 있는 태그와 동일하게 클릭시 취소선이 생기게 하고 싶음
[index2.js]
// handleSingleClick은 동일하게 정의해준뒤
function handleSingleClick(e){
const singleItem2 = document.getElementById(e.id)
singleItem2.classList.toggle('mystyle')
}
// # 7. 새로생긴 리스트에 onclick 기능을 추가해줘야 한다.
function toDoAddItem(){
// 1. to do list에 들어갈 내용을 적을 수 있게 정의해준다. 적어준 내용의 value == content
console.log('toDoAddItem 실행')
const toDoItemInput = document.getElementById('todo_item_input')
const content = toDoItemInput.value
// 2. content가 즉 to do list에 공백이 아닌 내용이 적혀 있을때
if (content){
console.log('content 있을때 실행')
// 3. html 에서 정의된 my_list에 들어간 object의 id == myList
const myList = document.getElementById('my_list')
// 4. myList에 해당하는 id 번호는 my_list에 있는 li태그 순서대로 정의됨
console.log(myList.getElementsByTagName('li').length)
// 5. 그래서 기존의 html에 존재 하는 li 태그의 길이 (== id 번호) 다음부터(+ 1) js에서 정의된 list의 id로 부여해줌
let list_number = myList.getElementsByTagName('li').length + 1
// 6. 새롭게 부여된 id를 가지고 있는 li태그의 element == newList
const newList = document.createElement('li') // 태그값을 붙여줘야됨
// 7. newList에 들어갈 내용은 1번에서 정의된 content를 저장해줌
newList.innerText = content
// 8. li 태그를 가진 새롭게 정의된 newList에서 onclick시 handleSingleClick(this)함수가 작동할 수 있게 만들어 준다.
newList.setAttribute('onclick', 'handleSingleClick(this)')
// 9. 1~7번 까지 정의된 내용을 반복해서 li 태그를 가진 새롭게 정의된 newList의 id를 list_number를 이용해 정의해 준다.
newList.setAttribute('id', `${list_number}th-item`)
// 10. content저장 , id 저장까지 완료 해 줬으면 화면에서 사용자가 보고, 이용할 수 있도록 추가해준다.
myList.append(newList)
// 11. 내가 to do list에 적은내용이 저장되면 썼던 내용은 공백으로 바껴서 다음내용을 쓸 수있도록 해준다.
toDoItemInput.value = ''
} else{
// 2-1. content가 즉 to do list에 공백일땐, 내용을 적으라고 alert을 이용해 알려줌
console.log('content 없을때 실행')
alert('to do list를 적어줘라~')
}
}
[index.css]
- onclick시 취소선을 만들어 주는 css
.mystyle{
text-decoration: line-through;
}'woncoding > TIL' 카테고리의 다른 글
| TIL | 11.16.수 [Docker] (0) | 2022.11.18 |
|---|---|
| TIL | 11.15.화 [소수 / 조합] (1) | 2022.11.16 |
| TIL | 11.11.금 [DRF ↔️ JS CRUD ] (0) | 2022.11.14 |
| TIL | 11.10.목 [Algorithm] (1) | 2022.11.10 |
| TIL | 11.9.수 [DRF ↔️ JS CRUD ] (0) | 2022.11.10 |