JavaScript ep.4

ep.3 강의에서 숙제가 있었다.
1번 버튼을 누르면 "아이디를 입력해주세요." 얼럿 표시.
2번 버튼을 누르면 "비밀번호를 입력해주세요." 얼럿 표시.

<div class = "alert-box" id = "alert">
  <p>알림창</p>
<button onclick = "alert('none')">닫기</button>
</div>
<button onclick = "alert('block')">아이디</button>
<button onclick = "alert('block')">비밀번호</button>

<script>
function alert(a){
	document.getElementById('alert').style.display = a;
}
</script>

ep.3에서 알게된 내용으로 우선 만들어 봤다.
음... 열고 닫히기는 되는데... 내용을 바꿔야한다...
그럼 function 안에 추가로 자바스크립트가 필요할 것 같다.

<div class = "alert-box" id = "alert">
  <p id="title">알림창</p>
<button onclick = "alert('none')">닫기</button>
</div>
<button onclick = "alert('block','아이디를 입력해주세요.')">아이디</button>
<button onclick = "alert('block', '비밀번호를 입력해주세요')">비밀번호</button>

<script>
function alert(a, b){
	document.getElementById('alert').style.display = a;
    document.getElementById('title').innerHTML = b;
}
</script>

이전 강의에서 파라미터는 여러개 만들 수 있다고 해서 만들어 봤다.
그리고 p태그 안에 내용이 변경되어야하니 태그에 id를주고 내가 원하는 내용을 넣어줬다.

이렇게 하니 숙제가 해결됐다.
버튼을 눌렀을 때 a = "block"으로 변경되면서 b 또한 "title" id를 찾아 안에 HTML 내용을 변경해주었다.

물론 닫기 버튼도 정상 작동했다!

그런데 어느새 코드가 또 길어지고 뭔가 복잡해졌다...

숙제 끝!