목차
- click 예제 - HTML onclick 속성 이용 방식
- click 정의
- click 구문
- click 예제 - JS onclick 속성 이용 방식
- click 예제 - JS addEventListener() 메서드 이용 방식
- click 예제 - 클릭할 때마다 값 변경
- click 예제 - 클릭 시, 이미지 토글
- click 예제 - 현재 클릭한 이미지만 활성화 토글
- click 예제 - 클릭한 해당 요소의 value값 확인
click 예제 - HTML onclick 속성 이용 방식
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
function homzzang() {
document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";
}
</script>
결과보기
click 정의
사용자가 요소를 클릭하면 실행.
click 구문
HTML 방식
<element onclick="myScript">
JS 방식 (2가지)
object.onclick = function(){myScript};
object.addEventListener("click", myScript);
PS1. addEventListener() 메서드는 IE9 이상 지원.
PS2. onClick처럼, 낙타문자 형식으로 적으로 안 됨.
click 예제 - JS onclick 속성 이용 방식
<p id="demo">클릭</p>
<script>
document.getElementById("demo").onclick = function() {homzzang()};
function homzzang() {
document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";
}
</script>
결과보기
PS. 파란색 부분을 아래처럼 적어도 정상 작동. 결과보기
document.getElementById("demo").onclick = homzzang;
click 예제 - JS addEventListener() 메서드 이용 방식
[방법1] 일반함수 이용
<p id="demo">클릭</p>
<script>
document.getElementById("demo").addEventListener('click', homzzang);
function homzzang() {
document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";
}
</script>
결과보기
[방법2] 익명함수 이용
<p id="demo">클릭</p>
<script>
document.getElementById("demo").addEventListener('click', function () {
document.getElementById("demo").innerHTML = "홈짱닷컴 Homzzang.com";
});
</script>
결과보기
click 예제 - 클릭할 때마다 값 변경
<span id="hz">A</span><br>
<input type="button" value="클릭" onClick="change()">
<script>
function change() {
var hz = document.getElementById('hz');
if (hz.innerText == "A") {
hz.innerText = "B";
} else if (hz.innerText == "B") {
hz.innerText = "C";
} else {
hz.innerText = "A";
}
}
</script>
결과보기
※ 1번 클릭하면 if문 실행, 한번 더 클릭하면 else if문 실행, 한번 더 실행하면 원래값으로 복귀.
관련글 https://sir.kr/qa/361250
click 예제 - 클릭 시, 이미지 토글
<script>
function toggleImage() {
var a = "https://i.imgur.com/PQNhCln.gif";
var b = "https://i.imgur.com/YrkG5xB.gif";
var hz = document.getElementById('hz');
hz.src = (hz.src === a)? b : a;
}
</script>
<img src="https://i.imgur.com/PQNhCln.gif" id="hz" onclick="toggleImage();"/>
결과보기
click 예제 - 현재 클릭한 이미지만 활성화 토글
<img id="A" src="A 주소" srcOn="A on 주소" srcOff="A off 주소" onclick='swapImage( this );'>
<img id="B" src="A 주소" srcOn="B on 주소" srcOff="B off 주소" onclick='swapImage( this );'>
<img id="C" src="C 주소" srcOn="C on 주소" srcOff="C off 주소" onclick='swapImage( this );'>
<script>
var other = null;
function swapImage(this) {
if( other && other != this ) {
other.setAttribute("src", other.getAttribute("srcOff"));
}
this.setAttribute("src", this.getAttribute("srcOn"));
other = this;
}
</script>
코드보기
https://stackoverflow.com/questions/45899126
click 예제 - 클릭한 해당 요소의 value값 확인
<button type="text" value="홈짱닷컴" onclick='checkvalue(this)'>버튼값 확인</button>
<script>
function checkvalue(my) {
alert(my.value);
}
</script>
결과보기
