[과제]
문제
아이디랑 패스워드를 입력받아, 유저 목록에 아이디랑 패스워드를 뿌려주는 것입니다.
조건 1.
아이디랑 패스워드 둘 다 입력이 되어있지 않을 때 alert창으로 "아이디 혹은 비밀번호가 빈 값 입니다." 띄우기
조건 2.
아이디랑 패스워드 중에 하나라도 입력이 되어있지 않을 때 alert창으로 "아이디 혹은 비밀번호가 빈 값 입니다." 띄우기
내가 쓴 코드
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<input id = "id" type = "text" placeholder = "Enter To ID.."/><br/>
<input id = "pw" type = "password" placeholder = "Enter To PW.."/><br/><br/>
<button id="btn">CLICK</button>
<h1>유저 목록</h1>
<ul></ul>
<script>
const id = document.querySelector('#id'); // id 불러오기
const pw = document.querySelector('#pw'); // pw 불러오기
const btn = document.querySelector('#btn'); // button 불러오기
const ul = document.querySelector('ul'); // ul 불러오기
btn.addEventListener('click', () =>{
if(id.value == '' || pw.value == ''){
alert('아이디 혹은 비밀번호가 빈 값 입니다.');
}else{
const li =document.createElement('li');
li.innerHTML = `ID : ${id.value}, PW : ${pw.value}`;
ul.append(li);
id.value = '';
pw.value = '';
}
})
</script>
</body>
</html>
유저 목록
결과 화면
'JavaScript' 카테고리의 다른 글
| 5주차_자바스크립트 (1) | 2022.11.13 |
|---|---|
| 3주차_자바스크립트 (1) | 2022.10.18 |
| 2주차_자바스크립트 (별찍기) (0) | 2022.10.07 |
| 2주차_자바스크립트(조건문, 반복문) (0) | 2022.10.07 |
| 1주차_자바스크립트 (변수, 자료형, 연산자) (2) | 2022.10.01 |
