<!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>
'JavaScript' 카테고리의 다른 글
| 210927_image,button,zoom-in/out, (0) | 2021.09.27 |
|---|---|
| 210927_array,button,image,push,innerHTML (0) | 2021.09.27 |
| 210927_button,image(절대주소,상대주소) (0) | 2021.09.27 |
| 210927_button,location.href (0) | 2021.09.27 |
| 210927_image,setAttribute(array) (0) | 2021.09.27 |