See the Pen block display/none by Jirong (@jirongkim) on CodePen.
document.getElementById('alert').style.display = 'block';태그의 onclick에 위의 문장을 입력하면 된다.
근데 저렇게 쓰면 뭔가 html이 더러워지기 때문에
addEventListener라는걸 쓴다.
아래처럼 쓸 수 있다.
<body>
<div id="alert">
<h1>alertbox임.</h1>
<button id="close">닫기</button>
</div>
<button id="bt1">button1</button>
<button id="bt2">button2</button>
<script>
document.getElementById('close').addEventListener('click', function(){
document.getElementById('alert').style.display = 'none';
});
document.getElementById('bt1').addEventListener('click', function(){
document.querySelector('#alert').style.display = "block";
document.querySelector('#alert h1').innerText = '바보';
});
document.getElementById('bt2').addEventListener('click', function(){
document.querySelector('#alert').style.display = "block";
document.querySelector('#alert h1').innerText = '멍청이';
});
</script>
</body>뭔가 더 복잡해진것은 착각이다.
저게 훨씬편하다.
'프로그래밍 > Web' 카테고리의 다른 글
| [React] 다른 링크로 이동했는데 페이지가 재렌더링돼서 state가 초기화 될 때 (0) | 2022.07.23 |
|---|---|
| [jQuery] 다운로드와 사용법 간단한 예제 (2) | 2022.05.16 |
| [Web] Flip효과 만들기 (0) | 2022.05.14 |
| [Web] Sticky를 이용해서 이미지는 가만히 있고 글만 움직이게 (0) | 2022.05.13 |
| [Web] CSS 그리드 레이아웃 몇가지 예시 (0) | 2022.05.13 |
댓글