210301 WECODE #13
let idwrite = document.getElementsByClassName('login_txt')[0];
let pwdwrite = document.getElementsByClassName('login_pwd')[0];
let btnclick = document.getElementsByClassName('login_btn')[0];
수정전
<script> document.addEventListener('keyup', function(){ if( idwrite.value.length > 0 && pwdwrite.value.length >= 6 ){ return btnclick.style.backgroundColor = "#0095F6"; } else{ return btnclick.style.backgroundColor = "#B2DFFC"; } }); </script>
삼항 연산자로 수정 후
login.js
<script> document.addEventListener("keyup", function () { const validation = txtwrite.value.length > 0 && pwdwrite.value.length > 5; btnclick.disabled = validation ? false : true; }); </script>
addEventListener의 객체가document인 이유는 내가
idwrite pwdwrite btnclick를 따로div로 묶지 않았기 때문이다.- 새
div로클래스값(class="test")을 주어 묶었다면test.addEventListener라 하면 된다.login.html
<body> <button class="login_btn" onclick="moveMain()" disabled>로그인</button> </body>
- 삼항연산자에
btnclick.disabled로 로직을 구현하기 위해서 login.html의 button태그도 수정을 하였다.<button>태그안에disabled을 주었다.login.css
<style> .login_btn{ margin-bottom: 70px; line-height: 30px; border: none; border-radius: 10px; color: white; background-color: #0095F6; } .login_btn:disabled { background-color: #C0DFFD; //추가내용!! } </style>
- css또한 변경을 해주었는데
login_btn:disabled일때 흐릿한 하늘색으로 유지하다가- 버튼이 활성화되면
login_btn에 파란색을 주었다.
페이지 이동
login.html
<button>로그인</button>login.js
<script> function moveMain() { location.href = "main.html"; } </script>
- 이렇게 함수로 따로 정의해야 이동한다....
- 생각 같아서는만 해줘도 움직일 것 같은데 console에 main을 정의할 수 없다고 뜬다.
비전공으로 일식 쉐프가 되었듯, 배움에 겸손한 프론트엔드 개발자가 되겠습니다 :)