<body>
<input id = "id" type = "text" placeholder="Enter To id"></input><br><br> //id input을 만듦
<input id = "pw" type = "text" placeholder="Enter To Password"></input><br><br> //pw input을 만듦
<button id = "btn">CLICK</button><br><br>//버튼 생성
<h1>유저목록</h1>
<ul></ul>
<script>
const id = document.querySelector('#id')//id 를 가져옴
const pw = document.querySelector('#pw')//pw 를 가져옴
const btn = document.querySelector('#btn')//버튼을 가옴
const ul = document.querySelector('ul')
btn.addEventListener('click' , () => { //버튼에게 이벤트를 부여
if(id.value == '' || pw.value == ''){ //만약 id의 값 또는 pw의 값이 없으면
alert('아이디 혹은 비밀번호가 빈 값입니다.') //문장 실헹
} else { //아니라면 아래 실행
const li = document.createElement('li') //li를 만듦
li.innerHTML = `ID : ${id.value} , PW : ${pw.value}` //li에 아래의 문장을 띄움
ul.append(li)//ul속에 li를 넣어줌
id.value = ''
pw.value = '' // 이벤트가 끝날 떄는 holder을 비워줌
}
})
</script>
</body>
