1. script를 body 영역에 넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.redTxt{color:red}
.blueTxt{color:blue}
.greenTxt{color:green}
</style>
</head>
<body>
<p id="changeText">클릭한 버튼의 색에따라 문장이 바뀝니다</p>
<p><button type="button" id="rBtn">빨강</button></p>
<p><button type="button" id="bBtn">파랑</button></p>
<p><button type="button" id="gBtn">초록</button></p>
<script type="text/javascript">
rBtn.onclick = function(){
document.getElementById("changeText").className = "redTxt";
}
bBtn.onclick = function(){
document.getElementById("changeText").className = "blueTxt";
}
gBtn.onclick = function(){
document.getElementById("changeText").className = "greenTxt"
}
</script>
</body>
</html>
body영역 마지막에 script를 넣을 시 "id"직접 불러와 이벤트를 적용할 수 있다.
2. script를 head영역에 넣고 마지막에 실행하기
HTML과 JS는 순차적으로 실행하는 언어로 window.onload = function() 실행문이 없을 시 문장이 제대로 실행되지 않는다.
'JavaScript > 초급 JS' 카테고리의 다른 글
| input type="range" 크롬에서 value 표시 (0) | 2018.02.06 |
|---|---|
| 자바스크립트로 css효과 주기 (inline과 class방식의 차이) (0) | 2018.01.29 |