* JavaScript HTML 메소드 중 하나인 getElementById() 기억하기 (해당 아이디를 가진 요소를 가지고 오는 함수)
* onclick 을 사용하여 src 속성 값을 변경 하는 예시를 만들어보고자 한다.
<!DOCTYPE html>
<html>
<style>
.sub{
margin-left:30px;
color:gray;
}
h2{
margin-left:15px;
}
</style>
<body>
<h2>YERIN 전구 끄고 키기</h2>
<p class="sub"><b>*w3school.com 페이지 참조*</b></p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">전구 키기</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">전구 끄기</button>
</body>
</html>
* onclick 에 document.getElementById('myImage') = myImage라는 아이디를 가진 요소를 가지고 온 후 .src='pic_bulbon.gif' 이미지의 src(경로)를 바꾸어라 라는 뜻
실행 결과
반응형
'LANGUAGE > JAVASCRIPT' 카테고리의 다른 글
| Javascript 문자열 비교 ( ==와 === 차이) (0) | 2023.08.24 |
|---|---|
| d3.js Scatter-Plot (산포도 그래프) (2) | 2023.02.06 |
| d3.js 사용법 - ⑤ bat chart의 rect 클릭 이벤트 (13) | 2022.11.15 |
| [JAVASCRIPT] 날짜 정보 객체 / D-DAY 계산법 (2) | 2022.11.13 |
| javascript<객체> 내장객체, 브라우저객체모델, 문서객체모델 (1) | 2022.11.13 |