<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button type="button" id="btn1">떡볶이</button>
<button type="button" id="btn2">삼겹살</button>
<button type="button" id="btn3">다코야끼</button>
<br><br>
<button type="button" id="btn4">점점작게</button>
<button type="button" id="btn5">점점크게</button>
<hr>
<img alt="" width="300" src="../image/11.png" id="img1" border="2">
<script type="text/javascript">
var b1=document.getElementById("btn1");
var b2=document.getElementById("btn2");
var b3=document.getElementById("btn3");
var b4=document.getElementById("btn4");
var b5=document.getElementById("btn5");
var img=document.getElementById("img1");
//버튼1..떡볶이
b1.onclick=function(){
img.setAttribute("src", "../image/떡볶이.png");
}
//버튼2..삼겹살
b2.onclick=function(){
img.setAttribute("src", "../image/삼겹살.png");
}
//버튼3..다코야끼
b3.onclick=function(){
img.setAttribute("src", "../image/다코야끼.png");
}
//버튼4..점점작게
b4.onclick=function(){
var w=img.getAttribute("width");
w-=10; //-,*는 string임에도 실행됨..+는 불가능
img.setAttribute("width",w);
}
//버튼5..점점크게
b5.onclick=function(){
var w=img.getAttribute("width");
w=parseInt(w); //+는 꼭 캐스팅(int로 형변환)해주기!
w+=10;
img.setAttribute("width",w);
}
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 210928_setInterval,setTimeout,clearInterval,keyCode (0) | 2021.09.28 |
|---|---|
| 210928_image,random,marquee,array,button (0) | 2021.09.28 |
| 210927_table,checkbox,radio (0) | 2021.09.28 |
| 210927_button,onchange (0) | 2021.09.27 |
| 210927_image,button,zoom-in/out, (0) | 2021.09.27 |