기초공사 (html,css,javascript)
6번 board - 모달창에 삭제 수정 - 버튼의글까지 나옴.--해결 --또다른 issue --미완료 본문
academy/JavaScript
6번 board - 모달창에 삭제 수정 - 버튼의글까지 나옴.--해결 --또다른 issue --미완료
에스프레소라떼 2024. 5. 18. 12:47//
저 코드를 이용한다.!!
// 스스로 풀이시작
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
<!-- <script defer src="js/dom04.js"></script> -->
<script defer src="js/dom0506.js"></script>
<style>
.content {
width: 1024px;
}
.disp {
height: 200px;
border: 1px solid black;
}
.tab_host {
display: flex;
margin-top: 20px;
text-align: center;
}
.tab:hover {
cursor: pointer;
}
.tab {
width: 200px;
border: 1px solid #ededed;
}
#list {
border: 1px solid #ededed;
}
/* modal*/
/* 모달창 기본 스타일 */
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* 모달 내용 스타일 */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
</style>
</head>
<body>
<p>
4. 아래의 입력창에 숫자가 입력되지 않도록 하고 길이 제한은 10자로 하시오.
<br />
숫자가 입력된다면 숫자가 입력되었다고 alert로 알려주시오
</p>
<input
type="text"
id="te_input"
maxlength="9"
placeholder="글자만 입력하세요."
/>
<p>
5.아래의 입력창에 입력 후 저장 버튼을 누르거나 엔터키를 누르면 입력한
내용이 아래의 list에 추가 되도록 하시오.
<br />초기화 버튼을 누르면 list안의 모든 내용이 지워져야 함
</p>
<h5>6.추가된 내용을 "각각" 수정 및 삭제 수 있게 변경하시오.</h5>
<!-- ------------------------------------------------------------ -->
<form id="form">
<input type="text" value="" width="600" id="list_data" name="content" />
<button type="submit" id="send" value="show_view">저장</button>
<button type="reset" id="reset_one">초기화</button>
<p>리스트</p>
<ul id="list">
<li class="liclass">list</li>
<li class="liclass">list</li>
</ul>
</form>
<!-- modal -->
<!-- 모달 구조 -->
<div id="myModal" class="modal">
<!-- 모달 내용 -->
<div class="modal-content">
<span class="close">X</span>
<p>수정 사항을 입력.</p>
<input type="text" id="modalInput" />
<button id="modalSave">저장</button>
</div>
</div>
</body>
</html>
js
/*
5번.
1.input의 공간
2. 저장버튼 / 초기화버튼
3. 저장하면 어디에 생기게? ul인 #list-- 부모
- document.createElement("li")
- li.textConent = "liclass"
- 부모.append(변수)
6번.
수정,삭제하기
*/
const $input = document.querySelector("#list_data");
const $saveBtn = document.querySelector("#send");
const $resetBtn = document.querySelector("#reset_one");
const $ul_list = document.querySelector("#list"); //ul
const $items = document.querySelectorAll("li"); // li들
console.log($items);
//요소만든다.
function update() {
const $li = document.createElement("li");
$li.className = "liclass";
// $li.textContent = $input.value;
$ul_list.appendChild($li);
// 삭제버튼
const $removeBtn = document.createElement("button");
$removeBtn.className = "remove_btn";
$removeBtn.textContent = "삭제";
$removeBtn.addEventListener("click", (e) => {
e.stopPropagation();
$removeBtn.parentNode.remove();
const target = e.target.parentNode;
console.log(target);
});
// 수정버튼
const $modifyBtn = document.createElement("button");
$modifyBtn.className = "modify_btn";
$modifyBtn.textContent = "수정";
// $span.textContent = $input.value;
// 텍스트를 담을 별도의 요소 생성
const $textContent = document.createElement("span");
$textContent.textContent = $input.value;
$li.append($textContent, $removeBtn, $modifyBtn); // li의 자식이 생김.
// 수정버튼시 prompt
$modifyBtn.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
// 수정버튼시 modal 나온다.
// $li.textContent = 모달input.value
// 저장버튼 시
// - 모달input.value = $li.textContent
// - $li.textContent에서 자식요소가 텍스트, 삭제버튼, 수정버튼이 있다.
// - 텍스트를 span 요소를 만들어서 span안에 텍스트를 넣어놓자!
const $modal = document.getElementById("myModal"); // 전체모달
const $modaContent = document.getElementsByClassName("modal-content");
const $modalInput = document.querySelector("#modalInput"); //input
const $modalSaveBtn = document.getElementById("modalSave");
//let currentLi; // 현재 수정하고자 하는 li 요소를 저장하기 위한 변수-- 없어도 되긴됨.
// $modalInput.value = $li.textContent;
$modal.style.display = "block";
console.log($modalInput.value);
// currentLi = $li;
// console.log(target); // button수정이 선택
// console.log(target.parentNode); //li
// li의 #text를 선택하면 된다.--#text를 어떻게 선택해?..
// 그러므로 span요소를 만들자
const target = e.currentTarget;
const targetParent = target.parentNode;
console.log(targetParent); // li가 나옴
for (const child of targetParent.children) {
// targetParent.chlidren는 text, 삭제버튼, 수정버튼
// 그럼 child는 $textContent, 삭제버튼, 수정버튼의 각 자식들...
console.log(child);
$modalInput.value = targetParent.textContent;
if (child.matches("span")) {
//
// $modalInput.value = child.childNodes[0].textContent; // 이렇게 해도 되고.
$modalInput.value = child.innerText;
break; //<span> 태그를 찾았으므로 더 이상 순회할 필요 없음
}
}
const $close = document.querySelector(".close");
//위의것을 getElementsClassName으로 하면 선택이 안된다..왜????
$close.addEventListener("click", () => {
$modal.style.display = "none";
});
// 모달창에서 저장하기
$modalSaveBtn.addEventListener("click", () => {
$li.textContent = $modalInput.value;
$modal.style.display = "none";
});
});
}
//저장할떄
$saveBtn.addEventListener("click", (e) => {
e.preventDefault();
// 입력 값이 빈 문자열인 경우 alert 표시
// 검색 trim()메소드 : 입력 값의 앞뒤 공백을 제거한 뒤 빈 문자열인지 확인
if ($input.value.trim() === "") {
alert("글을 입력하시오");
} else {
update();
$input.value = "";
}
});
// 초기화 버튼 클릭하면 모두 사라진다.
$resetBtn.addEventListener("click", () => {
$ul_list.innerHTML = ""; // 초기화.
});
issue
저장하기 클릭하면 모달창이 뜨면서 모달input의 내용이 버튼의 글까지 나오는 이슈가 있었다.
해결방법
1. li에 글만 저장되도록 하는 span요소태그를 만든다.
그래서 li.apeen($span, 삭제버튼, 수정버튼)을 놔둔다.
2. 아래 코드를 입력한다.
const target = e.currentTarget;
const targetParent = target.parentNode;
console.log(targetParent); // li가 나옴
for (const child of targetParent.children) {
// targetParent.chlidren는 text, 삭제버튼, 수정버튼
// 그럼 child는 $textContent--> span태그 , 삭제버튼, 수정버튼의 각 자식들...
console.log(child);
$modalInput.value = targetParent.textContent;
if (child.matches("span")) {
$modalInput.value = child.childNodes[0].textContent; // 이렇게 해도 되고.span태그의 첫번째자식
$modalInput.value = child.innerText; // 아래처럼 해도 된다.--span태그의 innerText
break; //<span> 태그를 찾았으므로 더 이상 순회할 필요 없음
}
}
위의코드로 해결됨.
그러나 또 다른 이슈가 기다리고 있다.
모달창에서 저장하기 클릭 후 모달창이 닫히기는 하나, 모두 바껴버린다.
1.li에 하나의 목록만 있으면 잘 바뀌나, 여러개 있으면 모두 바뀌어 버린다. 내가 선택한 li의 글만 바뀌게 하고 싶고.
2. 삭제버튼과 수정버튼이 없어지지 않아야한다.
'academy > JavaScript' 카테고리의 다른 글
| splice와 indexOf예제 (0) | 2024.05.20 |
|---|---|
| 책 - 함수형코딩 (0) | 2024.05.18 |
| childrenNodes / children (0) | 2024.05.14 |
| 과제-타이머 만들기- 안되는 이유-코드로.-해결 (0) | 2024.05.13 |
| axios cdn 다운로드- 설치 (0) | 2024.05.12 |
'academy/JavaScript' Related Articles
more
