티스토리 뷰

HTML&CSS&Javscript&Jquery

190820 과정평가형 시험 예상문제

猫猫 2019. 8. 20. 10:20
반응형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>form</title>
    <script  src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function(){
          $("#send").click(function(){
             var name=document.getElementById("name").value;
             var age=document.getElementById("age").value;
             if(isNaN(age)==true) {
                 alert("숫자만 입력 가능");
                 $("#name").val("");
                 $("#age").val("");
             }
             else{
                alert("NAME :" + name + " AGE : "+age);
                $("#name").val("");
                $("#age").val("");
             }
          });
        });
    </script>
</head>
<body>
    <div>
    <label>이름</label>
    <input type="text" id="name">
    <label>나이</label>
    <input type="text" id="age">
    <input type="submit" id="send">
</div>
</body>
</html>

 

이름, 나이를 text로 받아서 submit버튼 누르면 제출, 

alert으로 이름, 나이 띄우기. 

document.getElementaryID("아이디").value를 기억하자.

 

근데 패스워드에 문자열도 입력가능하기 때문에 성가심

isNaN(변수명) 으로 숫자인지 아닌지 판단해서 -> true(문자) false(숫자)

true라면 문자열이니까 숫자만 입력하게 하고, 텍스트들의 val을 공백으로 바꿔버린다. 

false일경우 숫자니까 기존의 alert으로 띄운다. 생각해보니 document.get~으로 가져올 필요도 없었네..? 

그냥 똑같이 $("#name").val()로 가져오면 됨...

 

 

반응형
저작자표시 비영리 변경금지

'HTML&CSS&Javscript&Jquery' 카테고리의 다른 글

190823 첫번째 문제  (0) 2019.08.23
190823 each문 써서 리터럴객체 배열에 등록하기  (0) 2019.08.23
190809 클래스 있없 체크하기  (0) 2019.08.09
190809 클릭 시 이미지 변화하기  (0) 2019.08.09
190809 each 연습  (0) 2019.08.09