로그인페이지만들기 / 추가학습

버튼비활성화 만들기

HTML

<fieldset>
        <input type="text" id="username" placeholder="아이디" />
      </fieldset>

      <div class="success-message hide">사용할 수 있는 아이디입니다</div>
      <div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>

      <fieldset>
        <input type="password" id="password" placeholder="비밀번호" />
      </fieldset>

      <div class="only-number hide">숫자만 입력이 가능합니다.</div>

      <fieldset>
        <input
          type="password"
          id="password-retype"
          placeholder="비밀번호 확인"
        />
      </fieldset>

      <div class="mismatch-message hide">비밀번호가 일치하지 않습니다</div>

      <fieldset class="signup">
        <button id="target_btn" class="btn">회원가입</button>
      </fieldset>

JS

1. 첫번째 시도해봤던 코드

let elInputUsername = document.querySelector('#username')
let elPassword = document.querySelector('#password')
let elPasswordRetype = document.querySelector('#password-retype')
let elTargetBtn = document.querySelector('#target_btn')

//버튼 활성 비활성화

//vlaue가 모두 입력된다면
elTargetBtn.onclick =function(){
  //다 채워졌을때는 btn.disabled = 'false'
  if(isFullBtn(elInputUsername.value,elPassword.value,elPasswordRetype.value)){
    elTargetBtn.disabled = false;
  }
  //안 채워졌을때는 btn.disabled = 'true'
  else{
    elTargetBtn.disabled = true;
  }
}

function isFullBtn(value1, value2, value3){
  return value1.length > 0 && value2.length >0 && value3.length >0
}

작동하지 않는 것 같다.

채워지지않았을 때는 들어가는 것 같은데,  비활성화가 안먹히는 듯..

class를 넣어서 classList.add 와 remove를 써야하나 싶은데 다시 시도해봐야겠다.

 

참고사항1

1. keyup 키보드에서 손을 땠을 때 실행
2. keydown 키보드를 눌렀을 때 실행 키보드를 누르고 있을 때 한번만 실행됨
3. keypress 키보드를 눌렀을 때 실행 키보드를 누르고 있을 때 계속 실행됨
* Ctrl, Alt, Shift 키 등은 keydown에서는 작동하지만 keypress 에서 작동하지 않음
출처:
https://silver0r.tistory.com/119
[어흥:티스토리]

 

---

우선, css 에서 disabled의 background-color를 darkgrey로 바꾸고 시작했다.

그리고 button은 disabled가 초기값이 되도록 설정해두었다.

 

검색 결과

elInputUsername.addEventListener('keyup', listener);
elPassword.addEventListener('keyup', listener);
elPasswordRetype.addEventListener('keyup', listener);

function listener() {
    switch (!(elInputUsername.value && elPassword.value && elPasswordRetype.value)) {
        case true: elTargetBtn.disabled = true; break;
        case false: elTargetBtn.disabled = false; break;
    }
}

아직 배우지 않은  switch! 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

switch - JavaScript | MDN

간단하게 해결되는 문장이었다. value가 채워지지않았다면 disabled 가 true로 채워졌다면 false로 변환하게 하는것이다.