728x90
반응형
진짜 봐도봐도 모르겠어서 일단 적어두고 나중에 더 배운 후에 다시 보자.
에러를 고치지 못할때마다 왜이렇게 속상하고 조급해지고 나 자신이 작아지는 지 모르겠다..ㅠㅠㅠㅠㅠ
배움이 부족해서 그런거니까 일단 넘기고 이 속상함도 여기에 묻어두자!
다음날 일어나자마자 계속 고민하다가 해결완료!!!! ㅠㅠㅠㅠㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 5의 배수 찾기 </title>
<style>
body{
text-align: center;
}
#input{
margin: 30px;
}
h1{
text-align: center;
}
</style>
</head>
<body>
<h1> 1~100의 수에서 5의 배수를 맞춰보세요.</h1>
<input type="text" id="input"><br>
<input type="submit" onclick="input()" value="확인">
<script>
function input(){
var num = document.querySelector("#input").value;
console.log(num);
if(num === null || num === ""){
alert("숫자를 입력해주세요.");
}
else if(0<num<=100){
if(num%5===0){
document.write("<h1>"+num+"은 5의 배수가 맞습니다.</h1>");
}else{
document.write("<h1>"+num+"은 5의 배수가 아닙니다.</h1>");
}
}else if(num ===0 || num>=101){
alert("1~100사이의 숫자를 입력해주세요.");
}
}
</script>
</body>
</html>
조건① input으로 받은 입력값 num이 null이 이거나 빈칸일때에는 숫자를 입력해달라는 alert창이 떠야함
에러 → 스페이스바를 이용해서 띄어쓰기 후에는 적용되지 않음
조건② input 입력값에 0을 쓰면 alert("1~100사이의 숫자를 입력해주세요."); 이게 실행되어야하는데
에러 → 그냥 5의 배수가 맞는지 안맞는지 적용됨
에러의 원인
① if문 조건의 순서가 잘못되었음
② num의 비교연산자를 0<num<=100 이런식으로 사용하면 안됨
function input(){
var num = document.querySelector("#input").value;
console.log(num);
if(num === null || num === ""){
alert("숫자를 입력해주세요.");
//num이 0인 경우를 먼저 잡아낸 후에 5의 배수를 찾아내도록 해야함
}else if(num == 0 || num>=101){
alert("1~100사이의 숫자를 입력해주세요.");
//위에서 num이 0인 경우에 먼저 걸러내므로 num<=100 만 조건으로 걸면 됨
}else if(num<=100){
if(num%5===0){
document.write("<h1>"+num+"은 5의 배수가 맞습니다.</h1>");
}else {
document.write("<h1>"+num+"은 5의 배수가 아닙니다.</h1>");
}
}
}728x90
반응형
'삽질기록장 > 알수없는 삽질' 카테고리의 다른 글
| [오늘의 삽질] CSS - 배경색과 border 색상이 다르게 나올때 (0) | 2022.11.15 |
|---|---|
| [오늘의 삽질] 자바스크립트 - 이벤트리스너 함수 사용 에러 (0) | 2021.01.13 |
| [오늘의 삽질] CSS - position:fixed 가 부분적으로 적용이 안될때 (0) | 2020.05.14 |
| [오늘의 삽질] 자바스크립트 - 할일 목록 삭제버튼 클릭시 콘솔에 배열 확인하기 (0) | 2020.05.07 |