자바스크립트로 html을 넣을때

[김현빈]

자바스크립트로 템플릿만들어서 html 넣는 부분에서 
저는 응용을 해서 자바스크립트 템플릿을 이미지 태그로 해서 html 에 넣었는데요 !

템플릿 안에 이미지태그들에게 클래스나 아이디를 지정해줘서 
이미지 클릭 시 모달창이 뜨는 형식으로 하고싶은데 잘 되지가 않습니다ㅠ

자바스크립트로 템플릿 만들어서 html넣을때는 클래스나 아이디 적용이 안되는건가요??

 

 

[codingapple]

html 넣어달라고 할 때

이미지누르면 뭐 해달라는 이벤트리스너도 같이 넣으시면 됩니다

[김현빈]

var 템플릿 = '<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B81.jfif">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B82.jfif" style="height: 430px; margin-left: -40px">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B83.jfif" style="height: 430px; margin-right: 100px">'

$('#pasta').append(템플릿).show();
}
});

 

지금 이 상태인데 이미지 하나하나에 클릭할때마다 다른 모달창이 나오게 하고싶습니다ㅠㅠ그래서 제 생각에는 이미지 하나하나에 아이디나 클래스네임 붙여서 하려고했는데 그게 안돼서..다른방법이 있을까요?
 

[codingapple]

말하신대로 이미지마다 클래스이름 붙여놓고

그 클래스 누르면 .show() 해주세요 라고 이벤트리스너 달면 됩니다 

[김현빈]

템플릿 안에다가 클래스네임까지 붙여놓고 
콘솔로그로 그 클래스네임을 찍어봤더니 안나오네요ㅠㅠ그렇다는건 안붙여진건데 

 

var 템플릿 = '<img class="item1" src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B81.jfif">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B82.jfif" style="height: 430px; margin-left: -40px">

<img src="./img/%ED%8C%8C%EC%8A%A4%ED%83%80%EC%99%80%EC%9D%B83.jfif" style="height: 430px; margin-right: 100px">'
$('#pasta').append(템플릿).show()
}
});

console.log(item1)

 

이런식으로 한 상태입니다!

[김현빈]

아 어펜드함수가 있는 로직 바로 아래에다가 클래스 찾고 클릭이벤트넣으니까 됩니다!
한번 다시 해볼게요 질문계속해서 죄송해요.........

[codingapple]

console.log(item1)은 item1이라는 변수를 출력하라는 뜻입니다 하지만 그런 변수는 없군요 

html을 class로 찾아서 출력하고 싶으면 console.log( $('.item1') ) 이런 식이겠군요 

[김현빈]

감사합니다 선생님

처음에는 웹페이지를 html 태그들로 채웠는데 이 부분 이후부터 자바스크립트로 html을 변경하고 추가하고 있습니다 . 

이렇게 하니 바디 부분에는 깔끔할지 몰라도 스크립트 부분에는 엄청 복잡해졌는데 
복잡해지면 파일로 쪼개서 나누더라도 자바스크립트로 html을 변경하고 추가하는 작업이 국룰? 관습? 뭐 그런건가요?? 

[codingapple]

간단한건 html 안에 <script>로 집어넣으셔도 되는데

복잡해지면 js 파일로 맘대로 빼면 됩니다

[김현빈]

한가지 더 여쭤보고싶은게 있습니다!

 

$('#pasta').append(템플릿).show()
$('.파스타와인1').click(function() {
var 템플릿2 = <script src="chart.js">
var 템플릿 = `
<div class="white-background">
<canvas id="myChart"></canvas>
<button class="btn btn-danger">닫기</button>`

$('.black-background').append(템플릿).show();
$('.white-background').append(템플릿2).show();
$('.btn').click(function() {
$('.black-background').hide();
$('.white-background').hide();
})
})
}
});

 

이런식으로 모달창안에 그래프를 넣고 싶어서 했는데 

자바스크립트를 파일나누기 해서 템플릿2에다가 경로를 넣었는데요 
작동은 잘 됩니다 그런데 처음 누를때는 잘되는데 닫기버튼누르고 다시 누르니까 모달창이 두개가 뜹니다 무엇이 문제일까요?ㅜㅜ

 

[글쓴이]

글