728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220425/keyup2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>입력된 숫자 이미지 선택하기</title>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<style type="text/css">
* {text-align: center; margin: 0px; padding: 0px;}
</style>
<script type="text/javascript">
$(function(){
//입력 버튼 클릭시 기능
$("#inbtn").click(function(){
//$("#userNum").val() : id=userNum인 태그의 value 값
//inputarr : 숫자값 한개씩 배열 저장
inputarr = $("#userNum").val().split(""); //문자 하나씩 배열
html = "";
//숫자의 갯수만큼 img 태그 생성
for(var i = 0; i < inputarr.length; i++) {
html += "<img width='100' height='100' border='1' />";
}
//<div id="card">... 내부에 html 형태로 저장. => 숫자의 갯수만큼 img태그 저장
$("#card").html(html);
//("#card img") : id='card'인 태그의 하위태그 중 img 태그들. 숫자 갯수 만큼
$("#card img").each(function(index){
//img 태그에 src 속성 설정
$(this).attr("src","../nums/num" + inputarr[index] + ".jpg");
})
})
$("#userNum").keyup(function(event) {
//event.keyCode : 입력된 키의 아스키 코드값
if(event.keyCode == 13) { //enter 키
//$("#inbtn") : 입력버튼
$("#inbtn").click(); //입력 버튼 클릭
}
})
})
</script>
</head>
<body>
<div>
<input type="text" id="userNum">
<input type="button" value="입력" id="inbtn">
</div>
<div id="card">
<img src="" width="100" height="100" >
</div>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 21. Jquery game (그림 맞추기 게임만들기) (0) | 2022.04.25 |
|---|---|
| [Jquery] 21. Jquery table ($(this).index(), $(this).parent().children().index(this), td:nth-of-type()) (0) | 2022.04.25 |
| [Jquery] 21. Jquery key1 (keydown, keypress, keyup) (0) | 2022.04.25 |
| [Jquery] 21. Jquery exam1 (제출버튼 클릭시 입력된 이름과 비밀번호를 alert창에 띄우기) (0) | 2022.04.25 |
| [Jquery] 21. Jquery event4 (stopPropagation, preventDefault) (0) | 2022.04.25 |