<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href = "../css/mystyle.css" type="text/css">
<style>
img{
width : 100px;
height : 100px;
border-radius : 50%;
}
</style>
<script>
function proc1(){
//ultag = document.getElementsByTagName('ul')[0];
ultag = document.querySelector('ul');
//allitem = ultag.getElementsByTagName('li')
allitem = ultag.querySelectorAll('li');
for(i=0;i<allitem.length; i++){
item = allitem[i].firstChild.data;
//alert(item);
//img태그 만들기 - <img src = "" alt = "">
vimg = document.createElement("img");
vimg.src ="../images/" + item + ".jpg";
vimg.alt = item;
//li에 추가
allitem[i].appendChild(vimg);
}
}
function proc2(litag){
//litag는 클릭한 li태그다
idata = litag.firstChild.data;
vimg = document.createElement("img");
vimg.src="../images/" + idata +".jpg";
vimg.alt = idata;
litag.appendChild(vimg);
}
</script>
</head>
<body>
<div class = "box">
버튼을 클릭하면 모든 아이템에 해당하는 이미지를 생성하여 추가한다.
<ul>
<li>수국</li>
<li>아메리카노</li>
<li>스포츠3</li>
<li>국화</li>
<li>딸기스무디</li>
</ul>
<br>
<button type = "button" onclick="proc1()">확인</button>
</div>
<div class = "box">
아이템을 클릭하면 아이템에 해당하는 이미지를 생성하여 추가한다.
<ul>
<li onclick="proc2(this)">수국</li>
<li onclick="proc2(this)">아메리카노</li>
<li onclick="proc2(this)">스포츠3</li>
<li onclick="proc2(this)">국화</li>
<li onclick="proc2(this)">딸기스무디</li>
</ul>
<br>
</div>
</body>
</html>
신입 개발자 입니다!!!