목차
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 속성 - 더블클릭 시, 실행할 스크립트 지정.
모든 브라우저 지원.
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>
결과보기
