JavaScript
|
2019. 11. 29. 09:00
[JavaScript] button 태그에서 a 태그처럼 href 설정하여 링크 이동하기
자바스크립트로 button 태그를 a태그처럼 사용하여 링크 이동하기
<a> 태그가 아닌 <button> 태그를 a태그처럼 사용하여 경로를 이동하고 싶은 경우 두 가지 방법을 사용해볼 수 있습니다. 기본 객체인 location 객체의 href 속성을 onclick 이벤트 시에 원하는 경로로 수정하는 방식으로 버튼에 직접 설정하는 방식입니다.
<script>를 따로 정의해주지 않아도 되기 때문에 심플하지만 유지보수에 좋지는 않습니다.
<button type="button" onclick="location.href = '/index.html';">이동</button>
원리는 같지만 <script> 태그에 핸들러 함수를 따로 정의해주는 방법도 있습니다.
<script type="text/javaScript">
function moveHome(){
location.href = "/index.html";
}
</script>
<button type="button" onclick="moveHome();">이동</button>
전체적인 코드
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javaScript">
function moveHome(){
location.href = "/index.html";
}
</script>
<button type="button" onclick="moveHome();">이동</button>
</body>
</html>
등록버튼을 누르면
주소창 경로가 바뀜과 동시에 해당 경로로 이동합니다. local에서 서버 없이 테스트 했기 때문에 파일경로로 인식하였지만 정상적인 웹 환경에서는 제대로 동작합니다.
'JavaScript' 카테고리의 다른 글
| [jQuery] 제이쿼리 $.each() 함수에서 break문 continue문 사용하는 방법 (0) | 2019.12.17 |
|---|---|
| [jQuery] 제이쿼리 $.each() 함수 100% 활용하기! (1) | 2019.12.16 |
| [JavaScript] 자바스크립트로 form 태그의 input 검증(validation) 후에 수동으로 submit 처리하기 (1) | 2019.07.27 |
| [JavaScript] 자바스크립트의 자료형(Data Type) (0) | 2019.06.05 |
| [JavaScript] JavaScript란? 자바스크립트 언어 설명 및 탄생배경 및 특징 (0) | 2019.06.03 |
도로락
WriterIT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그