로그인 조건이 맞아야 버튼활성화

내가 구현하려는 기능

1. 아이디와 비밀번호 모두 한 글자 이상 입력해야 로그인 버튼이 (연한 파란색 → 찐한 파란색)으로 스타일이 변경되면서 활성화되고
2. 그외에는 기존의 연한 파란색인 스타일속성을 가지면서 버튼 비활성화

내가 작성한 로직

const inputId = document.querySelector("#login-id");
const inputPassword = document.querySelector("#login-pwd");
const button = document.querySelector(".login-btn");

function loginBtn() {
    let idValue = inputId.value;
    let passwordValue = inputPassword.value;

    if(idValue.length > 0 && passwordValue.length > 0) {
        button.disabled = false;
        button.style.cursor = "pointer";
        button.style.backgroundColor = "#1c7ed6";
    }else {
        button.disabled = true;
        button.style.cursor = "default";
        button.style.backgroundColor = "#C4E1FB";
    }
}

function loginSuccess() {
    alert('로그인 성공!');
    window.location.href = 'https://eunjeong-97.github.io/myFirstProject/main.html';
    inputId.value = null;
    inputPassword.value = null;
    button.disabled = true;
    button.style.cursor = "default";
    button.style.backgroundColor = "#C4E1FB";
}

inputId.addEventListener('keyup', loginBtn);
inputPassword.addEventListener('keyup', loginBtn);
button.addEventListener('click', loginSuccess);

코드 해설

1. 아이디, 비밀번호 input과 로그인버튼을 DOM으로 가리키는 변수 선언

const inputId = document.querySelector("#login-id");
const inputPassword = document.querySelector("#login-pwd");
const button = document.querySelector(".login-btn");

2. 아이디, 비밀번호 input에 키보드가 입력될 때,
   loginBtn() 함수 실행하기

inputId.addEventListener('keyup', loginBtn);
inputPassword.addEventListener('keyup', loginBtn);

3. 2번의 상황에서 실행할 loginBtn() 함수 선언하는데,
   아이디 및 비밀번호 input에 입력된 value를 가리킬 변수 선언

function loginBtn() {
    let idValue = inputId.value;
    let passwordValue = inputPassword.value;

4. 만약 아이디와 비밀번호의 값 모두 1글자 이상 입력되었을 때,
   버튼이 활성화되면서 커서 모양이 바뀌고, 버튼 색이 찐한 파란색으로 변경된다

if(idValue.length > 0 && passwordValue.length > 0) {
        button.disabled = false;
        button.style.cursor = "pointer";
        button.style.backgroundColor = "#1c7ed6";
    }

5. 아이디 및 비밀번호가 조건에 충족되지 않으면
   버튼은 여전히 비활성화된 상태 + 커서 모양도 기본값 + 배경색도 기존에 설정한 연한 파란색이다

else {
        button.disabled = true;
        button.style.cursor = "default";
        button.style.backgroundColor = "#C4E1FB";
    }

6. 버튼을 클릭하게 되면 loginSuccess() 함수 실행한다

button.addEventListener('click', loginSuccess);

7. 버튼이 클릭했을 때 실행할 loginSuccess() 함수를 선언하는데
   • 로그인 성공이라는 알림창(경고창)이 화면에 나오고
   • main 페이지로 이동한다

function loginSuccess() {
    alert('로그인 성공!');
    window.location.href = 'https://eunjeong-97.github.io/myFirstProject/main.html';

8. 로그인 성공되면서 변경된 내용 → 초깃값으로 변경 (초기화)

inputId.value = null;
inputPassword.value = null;
button.disabled = true;
button.style.cursor = "default";
button.style.backgroundColor = "#C4E1FB";