TIL_210426

DOM

1.

<input type="text" id="username">의 값을 가져오려면,
console.log(document.querySelector('#username').value);

다음과 같이 값을 설정할 수도 있음.
document.querySelector('#username').value = '새로운 값';

2.
display:none <-> display:block
elFailureMessage.classList.remove('hide') //화면에 보이게
<-> elFailureMessage.classList.add('hide') // 화면에 안보이게

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

js
elFailureMessage.classList.remove('hide')

css
.hide {
  display: none;
}

4. 아이디 유효성 검사 코드

let elInputUsername = document.querySelector('#username')

let elFailureMessage = document.querySelector('.failure-message')
let elSuccessMessage = document.querySelector('.success-message')

// 1.아이디 입력창 (elInputUsername)에 글자를 키보드로 입력할 때 (onkeyup)
elInputUsername.onkeyup = function () {
    

    //2-1. 조건문
    if(isMoreThan4Length(elInputUsername.value)){
        //성공 메세지가 보여야 함
        elSuccessMessage.classList.remove('hide')
        //실패 메세지가 가려져야 함
        elFailureMessage.classList.add('hide')
    }
    else{
        //성공 메세지가 가려져야 함
        elSuccessMessage.classList.add('hide')
        //실패 메세지가 보여야 함
        elFailureMessage.classList.remove('hide')
    }
}

// 2.글자 수가 4개 이상이면 (true/false 를 return하는 함수)
function isMoreThan4Length(value){
    return value.length >=4
}