<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.success{color: blue;}
.fail{color: red;}
</style>
<script type="text/javascript">
function check(){
var num = document.forms.myForm.num.value;
var result = document.querySelector("#result");
var msg = '';
if(num > 0 && num < 11){
// 정상
msg = '정상 범위입니다.';
result.classList.add('success');
//result.classList.remove('success'); // 클래스 삭제 함수
}else{
// 비정상
msg = '비정상 범위입니다.';
//result.className = 'fail';
result.setAttribute("class", 'fail');
}
result.innerHTML = msg;
}
</script>
</head>
<body>
<form action="#" name="myForm">
1 ~ 10 사이 정수
<input type="number" id="num" name="num">
<input type="button" value="검증" onclick="check()">
</form>
<br/>
<div id="result"></div>
</body>
</html>
