목차
- onclick 예제 - <button> 클릭해 지정 요소에 내용 넣기
- onclick 정의
- onclick 구문
- onclick 예제 - <p> 클릭해 해당 내용 글자색 변경
- onclick 예제 - <button> 클릭해 <input> 입력값 복사
onclick 예제 - <button> 클릭해 지정 요소에 내용 넣기
<button onclick="homzzang()">클릭</button>
<p id="hz"></p>
<script>
function homzzang() {
document.getElementById("hz").innerHTML = "홈짱닷컴 Homzzang.com";
}
</script>
결과보기
onclick 정의
요소 클릭 시 실행할 스크립트 지정.
1. onclick 속성 사용 가능 태그 종류
모든 보이는 HTML 요소
- 예외: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title>
2. cf
ondblclick 속성 - 더블클릭 시, 실행할 스크립트 지정.
3.
모든 브라우저 지원.
onclick 구문
HTML 방식
- <element onclick="myScript">
JS 방식 (3가지)
- object.onclick = ()=>{myScript};
- object.onclick = function(){myScript};
- object.addEventListener("click", myScript);
[속성값]
myScript
요소 클릭 시, 실행할 JS 코드
- 주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
- 사용 방식 통일 권장.
onclick 예제 - <p> 클릭해 해당 내용 글자색 변경
<p id="hz" onclick="homzzang()">홈짱닷컴 Homzzang.com</p>
<script>
function homzzang() {
document.getElementById("hz").style.color = "red";
}
</script>
결과보기
onclick 예제 - <button> 클릭해 <input> 입력값 복사
hz1: <input type="text" id="hz1" value="홈짱닷컴 Homzzang.com"><br>
hz2: <input type="text" id="hz2"><br><br>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
let hz1 = document.getElementById("hz1");
let hz2 = document.getElementById("hz2");
hz2.value = hz1.value;
}
</script>
결과보기
