왜 순한맛이냐 하면 원래 '비밀번호가 일치합니다' 까지 넣을라다가
쉬울거라는 예상과 달리 ㄹㅇ피똥싸기 일보직전이라 일단 욕심을 버리기로 함
공백도 일치한다고 인식하기 때문에 아무것도 안적었는데 문구가 뜸
해결해보려고 문자를 쓸 때만 검사를 하도록 keydown 이벤트도 넣어봤는데 더 이상해지기만 할 뿐이었고
결국 졸려서 계속 짧게자다깨다 반복하다가
본격 하는법
내가 짠 코드
<HTML>
<!-------------------------------------->
<!--------- 아이디 / 비밀번호 ---------->
<div class="id-password">
<p>아이디</p>
<input type="text" name="userName" placeholder="아이디를 입력해주세요">
<p>비밀번호</p>
<input class="input-pw" type="password" name="userPassword"
placeholder="비밀번호를 입력해주세요"onchange="checkPw()">
<p>※ 영문, 숫자, 특수문자 포함 8글자 이상</p>
<p>비밀번호(확인용)</p>
<input class="input-pw2" type="password"
name="userPassword" placeholder="비밀번호를 한번 더 입력해주세요"onchange="checkPw()">
<p class="check-password"></p>
</div>
<Javascript>
let checkPw = () => {
/* 클래스나 ID는 불러오는게 자주 반복되고 그러면 식이 빨주노초파남보색으로 개길어지니까 변수선언부터 해줍니다 */
/* 굳이 전역변수로 쓸 이유가 없으면 지역변수로 쓰는게 낫다고 해서
함수 안에서 선언함 */
let pw1 = document.getElementsByClassName("input-pw")[0].value
let pw2 = document.getElementsByClassName("input-pw2")[0].value
let check = document.getElementsByClassName("check-password")[0]
// 비밀번호가 일치하지 않으면?
if (pw1 !== pw2) {
// 빨간색 글자로 '비밀번호가 일치하지 않습니다' 문구가 뜰 거임
check.style.color =
"#e60012";
check.innerHTML =
'<span><i class="fa-solid fa-circle-exclamation"></i> 비밀번호가 일치하지 않습니다</span>';
} else {
// 정상적으로 일치하면 문자 안뜸
check.innerHTML = '';
}
}
//함수실행 ㄱ
checkPw진짜 엄청 쉽습니다
저번에 했던 전광판에 비하면 진짜로 껌
사실 쉬워보여서 도전하려고 했던거임
<i> 태그 써있는건
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
에서 가져온 웹폰트아이콘입니다
사용법은 일단 냅다 가입하고 구글로 잘 찾아보면 됨
아니근데 뻘짓을 4시간이나 함
왜?
원래 처음에 계획했던 것은
이렇게 짜려고 했습니다 진짜 단순하게 생각했는데
보면 안맞는부분도 있고 변수정리도 안하고 진짜 걍....오줌 싸갈기듯 러프하게 적어놨죠
일단
첫번째 뻘짓
ID가 아닌 Class는 뒤에 인덱스 번호를 붙여야 작동함
ID가 아닌 Class는 뒤에 인덱스 번호를 붙여야 작동함
ID가 아닌 Class는 뒤에 인덱스 번호를 붙여야 작동함
ID가 아닌 Class는 뒤에 인덱스 번호를 붙여야 작동함
ID가 아닌 Class는 뒤에 인덱스 번호를 붙여야 작동함
(중요)
빨간 글씨로 위협하는게 아니고
ㄹㅇ제가 혼자 기억하려고 이렇게 해놓은겁니다
두번째 뻘짓
input 태그에서 value를 가져올 때 ...
HTML 부분에서....
onchange 안적어놓고,,
엥../? 콘솔창에 오류도 안뜨는데,,, 왜 작동이 안되지......,,,,,,
,,,,,
이러다가 졸다가 깨서 해결책을 찾아냄
세번째 뻘짓
아니 왜 공백도 비밀번호가 일치한다고 뜨는거야
그래서 아무것도 안썼는데 일치한다고 뜨네,,,
해결하려다가 진짜 정신나갈뻔
한 1시간가량 자다 깨서 생각한게 고작 이거임
나름 신박하다고 생각했는데
더 이상해짐
흠씬 두들겨맞고 몽롱한채로 12시가 지나버림
'개발관련 > JavaScript' 카테고리의 다른 글
| [Javascript강좌] 무한 루프 전광판을 만들어보자!(스압주의) (4) | 2023.02.25 |
|---|---|
| [Programmers] Lv.0 배열의 평균값 (Javascript) (0) | 2023.02.23 |
| [Programmers] Lv.0 짝수와 홀수 (Javascript) (0) | 2023.02.22 |
| [코알누] 함수 문제 풀이 (0) | 2023.02.21 |
| [VScode] 'let' is available in ES6 (use 'esversion: 6')..... 오류 해결하기 (0) | 2023.02.20 |
