728x90
반응형
참고: https://www.w3docs.com/snippets/html/how-to-make-button-onclick-in-html.html
HTML 요소의 onclick 속성은 모든 브라우저에서 지원하는 이벤트 속성입니다. 이는 사용자가 버튼을 클릭하면 발생합니다. onclick 버튼을 만들려면 <button> 요소에 onclick 이벤트 속성을 추가하면됩니다.
window.location 객체의 URL 바꾸기
버튼 요소의 onclick은 사용자가 버튼을 클릭했을 때 스크립트를 실행합니다. 버튼을 클릭하면 웹사이트를 이동하는 예제를 통해 이를 알아보겠습니다:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button onclick="window.location.href='https://sisiblog.tistory.com';">Click Here</button>
</body>
</html>위의 코드에서는 버튼 요소의 onclick 속성에 window.location의 URL을 변경하는 스크립트를 넣었습니다.
button onclick으로 현재 날짜 알아내기
button의 onclick 속성에 "getElementById('demo').innerHTML=Date()"을 추가하여 현재 날짜를 표시할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<p>버튼을 클릭하여 오늘의 날짜를 확인하세요.</p>
<button onclick="getElementById('demo').innerHTML=Date()">오늘의 날짜는?</button>
<p id="demo"></p>
</body>
</html>
onclick에 JavaScript 함수 연결
요소를 클릭하여 JavaScript 함수를 호출할 때 onclick 이벤트를 사용합니다. 버튼을 클릭하여 id="demo"인 <p> 요소에 메시지를 출력하는 예제를 보겠습니다:
<!DOCTYPE html>
<html>
<body>
<p>숨겨진 메시지가 있습니다. 확인해보세요.</p>
<button onclick="myFunction()">클릭!</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "안녕하세요!</br>만나서 반가워요!";
}
</script>
</body>
</html>
관련 글
반응형
'dev > javascript' 카테고리의 다른 글
| [javascript] 자바스크립트 객체 속성 지우기 (delete) (6) | 2023.06.07 |
|---|---|
| [javascript] 자바스크립트 온라인/오프라인 확인 (navigator.onLine) (7) | 2023.06.01 |
| [javascript] 자바스크립트 이벤트 리스너 등록 (addEventListener) (13) | 2023.05.31 |
| [javascript] 자바스크립트 객체 디스트럭처링 (destructuring) (13) | 2023.05.30 |
| [javascript] 자바스크립트 배열 합치기 (concat) (7) | 2023.05.30 |
댓글