본문 바로가기
Front

[Javascript] text 박스에 두 수를 입력하면 덧셈을 해주는 함수 / trim() / return / parseInt / onclick() /

by bkuk 2022. 9. 25.

덧셈 전

 

 

덧셈 후

 

 

전체 코드

    <script type="text/javascript">
        'use strict';

        // 함수 정의
        const checkfrm = function() {
            // 입력된 값(value) 중 공백이 있다면 제거
            if( document.frm1.num1.value.trim() == '' ) {
                alert( '입력 값이 없습니다.' );
            // 입력된 값(value)이 없다면 경고창(alert) 리턴(return)
                return;
            }
            // 입력된 값(value) 중 공백이 있다면 제거
            if( document.frm1.num2.value.trim() == '' ) {
                alert( '입력 값이 없습니다.' );
            // 입력된 값(value)이 없다면 경고창(alert) 리턴(return)
                return;
            } 

            // 처리
            // 혹시라도 문자열이 있을 수 있으니 정수화 시킨 후 변수에 담기
            let num1 = parseInt( document.frm1.num1.value );
            let num2 = parseInt( document.frm1.num2.value );

            document.frm1.num3.value = num1 + num2;
        };
    </script>
</head>
<body>

    <form action="test1.html" method="get" name="frm1">
        <input type="text" name="num1" />
        +
        <input type="text" name="num2" />
        =
        <input type="text" name="num3" />
        <input type="button" value="계산하기" onclick="checkfrm()"/>
    </form>
</body>

 


 

댓글