Front end/↳JavaScript예제

조건문 활용한 학점 출력 만들기

꽃피는봄날 2021. 1. 18. 11:22

 

▼코드보기▼

더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>조건문 활용한 학점 출력</title>

<script type="text/javascript">
	function choose(){
		
		var in_sc = document.inputForm.score.value;
		var in_degree = document.querySelector("#result");
		console.log(in_sc);
		
		if(isNaN(in_sc) || (0 > in_sc || in_sc > 100)){
			alert("0~100숫자만 입력하세요.");
			
		}else{
			if(90 <= in_sc && in_sc <=100){
				in_degree.innerHTML += "<strong>"+in_sc+"(A)</strong><br/>";
				
			}else if (80 <= in_sc) {
				in_degree.innerHTML += "<strong>"+in_sc+"(B)</strong><br/>";
				
			}else if (70 <= in_sc) {
				in_degree.innerHTML += "<strong>"+in_sc+"(C)</strong><br/>";
				
			}else if (60 <= in_sc) {
				in_degree.innerHTML += "<strong>"+in_sc+"(D)</strong><br/>";
				
			}else {
				in_degree.innerHTML += "<strong>"+in_sc+"(F)</strong><br/>";
				
			}
		}
		
	}

</script>
</head>
<body>

	<form action="" name="inputForm">
		점수를 입력해주세요.
		<input type="text" name="score" id="score">
		<input type="button" value="체크하기" onclick="choose()">
	</form>
	
	<div id="result"></div>


</body>
</html>

결과