210927_image,innerHTML,confirm,button
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
button {
width: 100px;
height: 30px;
background-color: #e6e6fa;
color: white;
border-radius: 30px;
margin-left: 10px;
}
div img{
max-width: 130px; /* 130이 넘을 경우만 적용 */
}
</style>
</head>
<body>
<!-- 각각의 버튼 클릭시 해당하는 사진을 출력..누적출력
매번 출력전 상품/연예인/미니언즈을 출력할까요? 예를 클릭시에만 이미지 출력 -->
<button type="button" onclick="buttonOne()">shop</button>
<button type="button" onclick="buttonTwo()">star</button>
<button type="button" onclick="buttonThree()">minions</button>
<hr>
<div id="result"></div>
<script type="text/javascript">
/* 헤드에 스크립트를 안 뒀기에 window.onload 안 해도 됨 */
var r=document.getElementById("result");
//버튼1
function buttonOne() {
var a=confirm("상품을 출력할까요?");
if(a){
r.innerHTML+="<img src='../cat/IMG_5188.JPG'>";
}
}
//버튼2
function buttonTwo() {
var a=confirm("연예인을 출력할까요?");
if(a){
r.innerHTML+="<img src='../star/star2.jpg'>";
}
}
//버튼3
function buttonThree() {
var a=confirm("미니언즈를 출력할까요?");
if(a){
r.innerHTML+="<img src='../image/01.png'>";
}
}
</script>
</body>
</html>
