1. 문제
if (done == 0) {
temp_html = `<li>
<h2>✅${bucket}</h2>
<button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
<button onclick="edit_bucket(${num})" type="button" class="btn btn-outline-primary">수정!</button>
<button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제!</button>
</li>
`
} else {
temp_html = `<li>
<h2 class="done">✅${bucket}</h2>
<button onclick="undo_bucket(${num})" type="button" class="btn btn-outline-primary">살리기!</button>
<button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제!</button>
</li>`
}
$('#bucket-list').append(temp_html): show_bucket() 중 일부
<script>
function edit_bucket(num){
let temp_html = `<div>
<div class="input_box">
<input id="update_text" class="form-control" type="text" placeholder="수정할 내용을 입력하세요">
<buttontoken interpolation">${num})" type="button" class="btn btn-outline-primary">완료</button>
</div>
</div>`
$('#bucket-list').append(temp_html)
}}
</script>GET 방식으로 db의 데이터(리스트)를 가져와서 index.html에 붙여주었다.
그리고 수정버튼을 만들어주었는데,
[문제 1] 수정 내용 입력창이 맨 아래쪽에 계속 붙는다.
[문제 2] 리스트가 여러개가 되면 수정버튼 그 어떤걸 눌러도 동작한다.
즉, 항목마다 개별적으로 작동하지 않는다.
"어떻게 하면 각각의 리스트에 수정버튼이 작동하게 할 수 있지 ?"
2. 시도
- 일단 수정 내용 입력창을 각각의 버킷리스트 아래에 붙도록 해야겠다.
let temp_html = ``
if (done == 0) {
temp_html = `<li>
<h2>✅${bucket}</h2>
<button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
<button onclick="edit_bucket(${num})" type="button" class="btn btn-outline-primary">수정!</button>
<button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제!</button>
</li>
<div>
<div class="input_box">
<input id="update_text" class="form-control" type="text" placeholder="수정할 내용을 입력하세요">
<button onclick="update_bucket(${num})" type="button" class="btn btn-outline-primary">완료</button>
</div>
</div>`
} else {
temp_html = `<li>
<h2 class="done">✅${bucket}</h2>
<button onclick="undo_bucket(${num})" type="button" class="btn btn-outline-primary">살리기!</button>
<button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제!</button>
</li>`
}
$('#bucket-list').append(temp_html)수정된 show_bucket()함수
[문제 1] 수정 내용 입력창이 맨 아래쪽에 계속 붙는다. 해결 !
- 수정창이 수정 버튼을 눌렀을 때 보였다 안보였다 하고싶다 !
<style>
.update_box {
display : none;
}
</style>깨알상식 : display 는 none --> 안보임 , block --> 보임
일단 수정창의 class 가 update_box이므로 update_box의 style.display를 none으로 준다.
그럼 수정하기 버튼이 클릭되었을 때 실행되는 함수인 edit_bucket()의 내용을 정의해줘야 한다. 그런데 이 때, 수정창의 전체를 div로 묶어주고 id나 class를 지정해주어야 전체적인 수정창과 수정버튼을 컨트롤 할 수 있음. 일단 id = "update_bucket"으로 주었다.
<script>
function edit_bucket(){
if($("#update_box").style.display == none){
$("#update_box").show();
}else{
$("#update_box").hide()
}
}
</script>근데.. 앞서 언급한
[문제 2] 리스트가 여러개가 되면 수정버튼 그 어떤걸 눌러도 동작한다.
즉, 항목마다 개별적으로 작동하지 않는다.
는 문제가 발생..
첫번째 리스트 항목의 수정 버튼 누르면 모든 리스트 중 어디선가 수정창이 열리고, 첫번째 항목이 아닌 다른 수정 버튼을 누르면 첫번째 항목의 수정창이 닫힘.. 그니까 수정창이 총 한개밖에 열리지 않고, 모든 수정 창이 닫는 기능을 수행해버리는것임.
그럼 이제 어떡하지 .. 사실 show, hide 할때도 아이디값과 그 속성을 어떻게 한 줄로 가져오는지 몰라서 좀 헤매느라고 이때부터 멘붕옴.
조금만 더 생각해보면
각각의 리스트에 번호를 부여해주고, 그 번호를 받아와서 show()하는 함수를 만들어주면, 각각 버킷리스트마다 수정창을 열 수 있다.
그런데 어떻게???? 값을 부여해줄 수 있지??? 난 아직 자바스크립트를 잘 모르는 코딩 아기인데 ????
그래서 일단 뇌피셜로..? 감으로 아무렇게나 해봄
let temp_html = ``
if (done == 0) {
temp_html = `<li>
<h2>✅${bucket}</h2>
<button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
<button onclick="edit_bucket(${num})" type="button" class="btn btn-outline-primary">수정!</button>
<button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제!</button>
</li>
<div class="update_box" id="update_box${num}">
<div class="input_box">
<input id="update_text" class="form-control" type="text" placeholder="수정할 내용을 입력하세요">
<button onclick="update_bucket(${num})" type="button" class="btn btn-outline-primary">완료</button>
</div>
</div>`
} else {
temp_html = `<li>
<h2 class="done">✅${bucket}</h2>
<button onclick="undo_bucket(${num})" type="button" class="btn btn-outline-primary">살리기!</button>
<button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제!</button>
</li>`
}
$('#bucket-list').append(temp_html)여기서,,, 어디에 아이디를 줘야할지 고민하다가,
1. li 태그에 줬는데 .. 오류남.
2. h2태그에 줘봄... 안됨..
3. 좀더 그 리스트를 특정해줄 수 있는 게 없을까 ? 해서 li 태그 밖에 div로 한번 더 묶어줌 ....... css 다 적용안되고 기능은 안함.... ==> css는 해당 div (전체를 묶어주는)를 삭제해 줌으로써 돌아왔음.
그러다가..
- 혹시 아이디값에도 ${num}이라는 변수?를 줄 수 있을까? 그거만 되면 해결 될 것 같은데.. 라고 생각해서 update_box에 id를 줌!!!
id="update_box${num}"라고 하면 각각의 리스트 항목에는 개별 아이디값이 생긴다.
update_box1, update_box2, update_box3 이런 식으로 ..! 절대 겹칠수가 없어짐. 사실 이래서 css 적용이 안됐던 건데, class로 처리해서 문제 해결됐으니까 괜찮!
그럼.... 저 숫자가 붙은 id값을 가져와서 그 아이디의 style.display값을 변경해주면 될 것같은데
문제는 내가 javascript를 잘 몰라서 저걸 컴퓨터에게 어떻게 말해줘야 알아먹을지 모르겠어.....
3. 해결
<li>
<h2>✅${bucket}</h2>
<button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
<button onclick="edit_bucket(${num})" type="button" class="btn btn-outline-primary">수정!</button>
<button onclick="delete_bucket(${num})" type="button" class="btn btn-outline-primary">삭제!</button>
</li>
<div class="update_box" id="update_box${num}">
<div class="input_box">
<input id="update_text" class="form-control" type="text" placeholder="수정할 내용을 입력하세요">
<button onclick="update_bucket(${num})" type="button" class="btn btn-outline-primary">완료</button>
</div>
</div>html 파일 중 일부 : update_box(${num})로 아이디값을 줬음 ! 작동함.
<script>
function edit_bucket(num){
if(document.getElementById('update_box'+num).style.display=='none'){
document.getElementById('update_box'+num).style.display='block'
}
else{
document.getElementById('update_box'+num).style.display='none'
}}
</script> edit_bucket 함수 정의
4. 알게된 점
document.getElementById('')
예)
document.getElementById('main')영어 글자 그대로 해당 엘리먼트의 id값을 가져오는 것임.
이 때, 주어진 아이디값이 없으면 null을 반환한다.
그리고 저 괄호 안에 num을 넣어도 작동이 된다는 사실을 처음 알았음 !!!
id값.style.display == '어쩌구저쩌구'id값의 css 중 display의 속성을 표현하는 법임.
그럼 . 으로 저렇게 한줄로 속성을 표현해줄 수 있나봄 ! style만 가능한걸까나..
그리고 function 함수명() 에서
()안에 변수를 넣어도 됨... html의 ${num} 값을 가져온 무언가인데, 이 때 꼭 괄호안의 값이
function 함수명(num)이 아니어도 됨.
a, b, c, blah 뭐든 상관없음
대신 !!
<script>
function edit_bucket(ddd){
let a= 1
ddd + a + b
}
</script> ㅋㅋㅋ 예시를 .. 모르겠지만 어쨌든 함수 정의 안에 저 변수가 들어가줘야함.. 받았으면 써먹어야지... 임마.... .
5. 참고자료
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<span class="q" id="q0" style="display: none;">
Your Answer1
</span>
<button onclick="outputhide(0)" style="background-color: #f17269; border-bottom: 0.15em solid black; border-radius: 3px; border: none; color: white; font-weight: 700; padding: 0.5em 1em; padding: 0.65em 1.3em;" title="Click to Show/Hide Content" type="button">Show/Hide</button>
<div class="q" id="q1" style="display: none;">
Your Answer2
</div>
<button onclick="outputhide(1)" style="background-color: #f17269; border-bottom: 0.15em solid black; border-radius: 3px; border: none; color: white; font-weight: 700; padding: 0.5em 1em; padding: 0.65em 1.3em;" title="Click to Show/Hide Content" type="button">Show/Hide</button>
<div class="q" id="q2" style="display: none;">
Your Answer3
</div>
<button onclick="outputhide(2)" style="background-color: #f17269; border-bottom: 0.15em solid black; border-radius: 3px; border: none; color: white; font-weight: 700; padding: 0.5em 1em; padding: 0.65em 1.3em;" title="Click to Show/Hide Content" type="button">Show/Hide</button>
<script type="text/javascript">
function outputhide(val){
//if you want to hide all answer then comment this
// hideNonVisibleDivs();
if(document.getElementById('q'+val).style.display=='none')
{
document.getElementById('q'+val).
style.display=''
}
else{
document.getElementById('q'+val).style.display='none'
}
}
function hideNonVisibleDivs() {
var divsToHide = document.getElementsByClassName("q");
for(var i = 0; i < divsToHide.length; i++){
if(document.getElementById('q'+i).style.display!='none')
{
document.getElementById('q'+i).style.display='none'
}
}
}
</script>
</body>
</html>