DOM으로 <\input type="text"> 또는 <\textarea>와 같은 엘리먼트의 입력 값을 설정하거나, 또는 얻어내려면 어떤 속성을 사용해야 할까요?
변수.value = '값'
이것은 자바스크립트에 의해 바뀌는 것!
어떤 문장을 상황에 따라 숨기거나 나타내고 싶을 때라도 기본적인 문구는 html에 넣어줘야함
보여지고 안보여지고의 결정은 자바스크립트
가 결정
<fieldset>
<input type="text" id="username" placeholder="아이디"/>
</fieldset>
<div class="success-message hide">사용할 수 있는 아이디입니다</div>//조건
<div class="failure-message hide">아이디는 네 글자 이상이어야 합니다</div>//조건
```
elfailurmessage.style.display ='none' <----> 'block//보임
css에 .hide{
display = none;
}
을 적고 html의 class에 hide추가
elfailurmessage.classList.remove('hide') -->가 되면 이 코드 때문에
hide로 가려졌던 글자가 나타난다!
elfailurmessage.classList.add('hide') -->add면 다시 hide가 추가됨
elinputusername.onkeyup(키보드가 눌렸다 때질때) =function<이벤트헨들러(){}
-글자수가 4개이상이면
function ismorethan(value) {
return value.length >=4
}
function isMatch (password1, password2) {
// TODO : 동영상 강의를 보고 이 함수를 완성하세요.
if(password1 === password2){
return true
}else{
return false
}
}
매개변수에 이미 passwor1과 password2가 있으니 두개의 값은 이두개이다 password2.onkeyup = function (){
//맞을때랑 틀릴때
if(isMatch(`password1.value` , `password2.value`)){
elMissmatch.classList.add('hide')
}else{
elMissmatch.classList.remove('hide')
}
}
그리고 오류메세지의 class는
let elMissmatch = document.querySelector('.mismatch-message')
오류가 났던이유는 '.mismatch-message'뒤에 붙어있는 hide까지 같이 가져와서 오류가 났다.
![](https://velog.velcdn.com/images/ank0425/post/f95875b5-18cf-4ca5-8af3-5f0d39267246/image.gif)
gif는 이번 과제때 css목업으로 해본 것이다.!