[Javascript] input 태그 / onclick / parseInt / 계산기 기초 / 두 수의 합 구하기

로그인을 위해서 아이디/비밀번호를 입력할 때나

회원가입을 하기 위해서 개인정보를 입력할 때

블로그나 게시판에 글을 작성하거나, 파일을 전송할 때

 

사용하는 form 태그에 대해서 알아보았습니다.

[HTML] form / 서버 / 클라이언트 / GET과 POST의 차이에 대해서 / method: get / method: post

---

두 수를 입력받아 더하기를 해주는 화면을 구현했다고 가정해봅시다.

핵심 소스 코드는 다음과 같습니다.

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

 

소스 코드 중 onclick = "plustAB()" 

 

onclick 속성에 의해 plusAB() 함수를 호출할 의도로 작성했습니다.

<input type="button" value="계산하기" onclick="plusAB()"/>

이제 함수를 작성해봅시다.

 

함수를 생성하고

const plusAB = function() {

};

 

변수를 선언하고, 

 

const plusAB = function() {

    let a = document.frm1.num1.value;
    let b = document.frm1.num2.value;
    
};

 

입력받은 값을 더해주는,

const plusAB = function() {

    let a = document.frm1.num1.value;
    let b = document.frm1.num2.value;
    document.frm1.num3.value = parseInt(a) + parseInt(b);
    
};

 

어느정도 완성이 되었으니, 테스트를 해보겠습니다.

 

작동이 잘되는 것으로 확인됩니다.

 

---

하지만, 사용자가 값을 입력하지 않으면 NaN가 출력됩니다.

NaN (Not a Number)란? NaN이란 수치 연산을 해서 정상적인 값을 얻지 못할 때 출력되는 값

 

이에 대해서 안정장치를 추가해보겠습니다.

두 수 중 하나라도 넣지 않으면 "값을 입력하세요" 라는 문구를 alert() 메서드를 이용해서 구현하겠습니다.

const plusAB = function() {

    if(frm1.num1.value == "") {
        alert("값을 입력하세요");
    } else if(frm1.num2.value == "") {
        alert("값을 입력하세요");
    } else {
        let a = document.frm1.num1.value;
        let b = document.frm1.num2.value;
        document.frm1.num3.value = parseInt(a) + parseInt(b);
    }   
};