| HTML 문서내의 요소를 클릭했을때 발생한다 |
💐 onclick 이벤트 핸들러 1
// 이미지를 클릭하면 이미지가 변경됨
let cnt = 0; // 전역변수
function imageChange(){
if(cnt == 0 ){
document.getElementById("quiz").src = "../image/2.jpg";
cnt = 1;
} else {
document.getElementById("quiz").src = "../image/3.jpg";
cnt = 0;
}
}<!-- imageChange()로 정의 -->
<img id="quiz" src="../image/1.jpg" onclick="imageChange()" />
💐 onclick 이벤트 핸들러 2
function changeColor(c) {
document.getElementById("target").style.backgroundColor = c;
}<!-- changeColor()로 정의 -->
<div id="target">
<form name="form2">
<input type="radio" name="color" value="lightblue" onclick="changeColor(this.value)"><label>파랑색</label>
<input type="radio" name="color" value="lightgreen" onclick="changeColor(this.value)"><label>녹색</label>
</form>
</div>
💐 onclick 이벤트 핸들러 3
function tagCheck(){
let data = document.getElementById("resultArea");
data.innerHTML = document.getElementById("tag").value;
}<div id="tagExercise">
<form>
<textarea rows="15" cols="55" id="tag">
<html>
<head></head>
<body>
<h1>안녕하세요.</h1>
</body>
</html>
</textarea><br />
<button type="button" onclick="tagCheck()">태그 확인</button>
</form>
<div id="resultArea"></div>
</div>ㄴ
'box > javascript+' 카테고리의 다른 글
| 키보드 이벤트 - keyup (0) | 2022.06.30 |
|---|---|
| 마우스 이벤트 - onmouseover / onmouseout (0) | 2022.06.30 |
| Javascript 내장 객체 - history (0) | 2022.06.30 |
| Javascript 내장 객체 - navigator (0) | 2022.06.30 |
| Javascript 내장 객체 - location (0) | 2022.06.30 |