<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form name="f1">
A:<input type="text" name="a" id="a"/><br/>
B:<input type="text" name="b" id="b"/><br/>
RESULT:<input type="text" name="result" id="result"/><br/>
<input type="button" value="+" onclick="chk('+')"/>
<input type="button" value="-" onclick="chk('-')"/>
</form>
</body>
</html>
문제) 위의 HTML을 기본으로, +를 누르면 a + b 를 result 에, -를 누르면 a - b 를 result 에 표시하고
버튼을 누를 때 a 나 b에 값이 없으면 'A값을 입력하세요' 라는 식으로 경고창을 띄우는 자바스크립트를 작성하시오.
내가 해본 것)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function add() { // 덧셈 함수는 parseInt를 써봄.(input는 무조건 문자열만 받으므로)
var aNum = parseInt(document.f1.a.value);
var bNum = parseInt(document.f1.b.value);
result = aNum + bNum;
if (document.f1.a.value == null | document.f1.a.value == "") { alert('A값을 입력하세요'); }
else if (document.f1.b.value == null | document.f1.b.value == "") { alert('B값을 입력하세요'); }
else
document.f1.result.value = result;
}
function subtraction() { // 뺄셈 함수는 eval을 써봄
var aNum = document.f1.a.value;
var bNum = document.f1.b.value;
var result = eval(aNum - bNum);
if (document.f1.a.value == null | document.f1.a.value == "") { alert('A값을 입력하세요'); }
else if (document.f1.b.value == null | document.f1.b.value == "") { alert('B값을 입력하세요'); }
else
document.f1.result.value = result;
}
</script>
</head>
<body>
<form name="f1">
A:<input type="text" name="a" id="a"/><br/>
B:<input type="text" name="b" id="b"/><br/>
RESULT:<input type="text" name="result" id="result"/><br/>
<input type="button" value="+" onclick="add()"/>
<input type="button" value="-" onclick="subtraction()"/>
</form>
</body>
</html>
강사님 설명)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function chk(op) { // op라는 매개변수로 +나 -를 받아오도록 함
var a = document.f1.a;
var b = document.f1.b;
if(a.value.trim() == '') { alert('A값을 입력하세요'); return;} // 공백문자 인식불가를 위한 trim으로 제거
if(b.value.trim() == '') { alert('B값을 입력하세요'); return;}
var numA = parseInt(a.value);
var numB = parseInt(b.value);
if(op == '+') {
document.f1.result.value = numA + numB;
}
else if(op == '-') {
document.f1.result.value = numA - numB;
}
}
</script>
</head>
<body>
<form name="f1">
A:<input type="text" name="a" id="a"/><br/>
B:<input type="text" name="b" id="b"/><br/>
RESULT:<input type="text" name="result" id="result"/><br/>
<input type="button" value="+" onclick="chk('+')"/>
<input type="button" value="-" onclick="chk('-')"/>
</form>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| ECMA 스크립트에서의 배열 (0) | 2016.05.24 |
|---|---|
| 자바스크립트로 회원가입시 문자 체크 (0) | 2016.02.15 |
| 자바 스크립트의 기본: 이벤트 처리 (0) | 2016.02.15 |
| 자바 스크립트의 기본: Array, String, Date, Math, DOM, 브라우저 객체 (0) | 2016.02.15 |
| 자바 스크립트의 기본: 제어문, 함수 function (0) | 2016.02.15 |
