자바스크립트로 button 태그를 a태그처럼 사용하여 링크 이동하기
<a>태그가 아닌 <button> 태그를 a태그처럼 사용하여 경로를 이동하고 싶은 경우 두가지 방법을 사용해볼 수 있습니다. 기본 객체인 location 객체의 href속성을 onclick 이벤트시에 원하는 경로로 수정하는 방식으로 버튼에 직접 설정하는 방식입니다.<script>를 따로 정의해주지 않아도 되기때문에 심플하지만 유지보수에 좋지는 않습니다.|
<button type="button" onclick="location.href = '/index.html';">이동</button> |
cs |
원리는 같지만
<script>태그에 따로 핸들러 함수를 따로 정의해주는 방법도 있습니다.|
<script type="text/javaScript">
function moveHome(){
location.href = "/index.html";
}
</script>
<button type="button" onclick="moveHome();">이동</button> |
cs |
전체적인 코드는 다음과 같습니다.
|
<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> |
cs |
등록버튼을 누르면
주소창 경로가 바뀜과 동시에 해당 경로로 이동합니다. 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 |
도로락
IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그