자바스크립트로 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에서 서버 없이 테스트 했기 때문에 파일경로로 인식하였지만  정상적인 웹 환경에서는 제대로 동작합니다.


블로그 이미지

도로락

IT, 프로그래밍, 컴퓨터 활용 정보 등을 위한 블로그

댓글을 달아 주세요! 질문 환영합니다!