JavaScript

210927_array,button,image,push,innerHTML

요옫 2021. 9. 27. 15:28

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

#result img{

    max-width: 300px;

}

 

</style>

</head>

<body>

<!-- 이미지출력이라는 버튼 생성 후 버튼 클릭시 prompt로 출력할

이미지의 번호를 입력해 주세요, 0번 입력시 0번 이미지 출력(총5개의 이미지를 배열로 넣기) 

5번 이후 입력시 해당번호의 이미지는 없습니다 -->

  <button type="button" onclick="writeImage()">이미지출력</button>

<!-- onclick 또는 id 둘 중하나로 -->

 

<hr>

<div id="result"></div>

 

<script type="text/javascript">

//배열에 이미지

  var imgarr=new Array();

 

  //imgarr[0]="";

  //imgarr.push("");  둘 중 하나로

  imgarr.push("../cat/IMG_5126.JPG");

  imgarr.push("../cat/IMG_5188.JPG");

  imgarr.push("../cat/IMG_5507.JPG");

  imgarr.push("../cat/IMG_6535.JPG");

  imgarr.push("../cat/IMG_6600.JPG");

 

  var r=document.getElementById("result");

  

  function writeImage() {

var idx=prompt("출력할 이미지의 번호 입력",0);

 

if(idx<0 || idx>4)

r.innerHTML="해당번호 불가능";

else

r.innerHTML="<img src=img'"+imgarr[idx]+"'>";

}

  

</script>

</body>

</html>

 

'JavaScript' 카테고리의 다른 글

210927_button,onchange  (0) 2021.09.27
210927_image,button,zoom-in/out,  (0) 2021.09.27
210927_image,innerHTML,confirm,button  (0) 2021.09.27
210927_button,image(절대주소,상대주소)  (0) 2021.09.27
210927_button,location.href  (0) 2021.09.27