Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 계산맞추기 게임
- Concurrently
- 거북이 대포 게임
- Colaboratory 글자 깨짐
- Python
- 타자 게임 만들기
- spring-boot
- 노드에 리액트 추가하기
- ReactDOM.render is no longer supported in React 18. Use createRoot instead
- JS 개념
- 모던자바스크립트
- props
- googleColaboratory
- 모두의 파이썬
- 자바스크립트
- 따라하며 배우는 노드 리액트 기본 강의
- 인프런
- 리액트
- react오류
- DB Browser
- 웹 게임을 만들며 배우는 리액트
- intellij
- node.js로 로그인하기
- You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client"
- node.js 설치
- vs code 내 node
- react
- intllij 내 Bean을 찾지 못해서 발생하는 오류
- Spring-Framework
- Do it 자바스크립트 + 제이쿼리 입문
Archives
- Today
- Total
프로그래밍 삽질 중
[javascript] API로 받아온 정보 내 각각의 버튼에 함수 적용 본문
* 상황 : 삭제한 단어들 안에 각각 "단어 복구하기" 버튼 존재
-> 버튼을 누르면 삭제되었던 것이 다시 원래 항목으로 돌아감
* 실제로 delete로 데이터가 완전히 삭제된 것이 아닌 status가 D -> A로 이동하는 과정
* 만들어야 하는 것들
- 단어 확인하기 버튼 누르면 staus가 "D"인 항목들 보여주기
- 닫기 버튼 누르면 staus가 "D"인 항목들 삭제하기
- 단어 복구하기 버튼을 누르면 status가 "D"에서 "A"로 이동
* 말보다는 동영상 첨부가 효율적일 것 같아 첨부
* API는 첨부하지 않음
* HTML, JS만 첨부
HTML
<div class="deleted-items">
<div class="deleted-item-list">
<p>삭제한 단어들</p>
<button class="deletedWord-btn" id="D">단어 확인하기</button>
<button class="deletedWord-btn-close">닫기</button>
<div class="deletedWord-result" name="deletedItems">
//JS를 통해 넣을 정보들
</div>
</div>
</div>
JS
function changeStatusWord(event, token) {
if (confirm("삭제한 단어를 복구 시키겠습니까? 아니라면 아니오 누르기")) {
alert("예를 눌렀습니다.");
changeStatus(event, token);
return;
} else {
alert("아니오를 눌렀습니다.");
return false;
}
}
//삭제된 정보(status="D")들 보기
const $deletedWord = document.querySelector(".deleted-item-list");
$deletedWord.addEventListener("click", deleteWordController);
function deleteWordController(event) {
const token = localStorage.getItem("w-access-token");
if (!token) {
return;
}
const target = event.target;
const className = target.className;
const eventType = event.type;
const key = event.key;
// console.log("target", target);
// console.log("className", className);
// console.log("eventType", eventType);
// console.log("key", key);
if (className === "deletedWord-btn" && eventType === "click") {
deletedWordShow(event, token);
return;
}
if (className === "deletedWord-btn-close" && eventType === "click") {
const $deletedSectionUl = document.querySelector(
`div[name="deletedItems"]`
);
$deletedSectionUl.innerHTML = "";
return;
}
}
//sql에서 status가 "D"인 정보들 보여주게 하기
async function deletedWordShow(event, token) {
const status = event.target.closest(".deletedWord-btn").id; //D로 고정
// console.log(status);
const config = {
method: "get",
url: url + `/deletedWords/${status}`,
headers: { "w-access-token": token },
};
try {
const res = await axios(config);
// console.log(res);
const wordDataSet = res.data.result;
for (let deletedSection in wordDataSet) {
console.log("wordDataSet", wordDataSet);
console.log(typeof deletedSection);
const $deletedSectionUl = document.querySelector(
`div[name="deletedItems"]`
);
const arrayForEachSection = wordDataSet[deletedSection];
let deletedResult = "";
for (let deletedWords of arrayForEachSection) {
//작성할 단어들
let element = `<p class="deletedWords-result" id="A">[결과값]
영단어 : <span class="deletedWords-result-eng">${deletedWords.english}</span>
한글 : <span class="deletedWords-result-kor">${deletedWords.korean}</span> 종류 : <span
class="deletedWords-result-type">${deletedWords.type}</span>
<button class="changeStatusdWord-btn" id=${deletedWords.wordIdx} name="A" onClick="changeStatusWord(event)">단어 복구하기</button>
</p>`; //onClick 사용 시 각각의 버튼에 각각 함수가 적용됨
deletedResult += element;
}
$deletedSectionUl.innerHTML = deletedResult;
}
if (res.data.code !== 200) {
alert(res.data.message);
return false;
}
readWords();
return true;
} catch (err) {
console.error(err);
}
}
async function changeStatus(event) {
const token = localStorage.getItem("w-access-token");
if (!token) {
return;
}
const wordIdx = event.target.closest(".changeStatusdWord-btn").id;
// console.log(wordIdx);
const config = {
method: "patch",
url: url + `/changeStatus/${wordIdx}`,
headers: { "w-access-token": token },
data: {
wordIdx: wordIdx, //복구하고자 하는 단어의 Idx값 전달하기
},
};
try {
const res = await axios(config);
if (res.data.code !== 200) {
alert(res.data.message);
return false;
}
readWords();
window.location.reload();
return true;
} catch (err) {
console.error(err);
}
}
'과거 프로그래밍 자료들 > 프로젝트' 카테고리의 다른 글
sql 오류 및 sequelize 정리 (0) | 2022.09.01 |
---|---|
[영어단어장 version 1.0] react + mysql + 배포 완료 (0) | 2022.08.25 |
[javascript] input 체크박스(JS에서 만든 경우) 의 체크 항목 개수 구하기 (0) | 2022.08.10 |
[javascript] 객체의 값 반복문 사용, 반복되는 코드 함수로 통일 (0) | 2022.08.10 |
[javascript] 여러가지 input 작성, scroll, object 길이 파악하기 (0) | 2022.08.09 |