Html 버튼 클릭시 페이지 이동 - html beoteun keulligsi peiji idong

Question

현재 페이지에서 다른 페이지로 이동하기
onclick ="location.href='index.html'"
새 페이지에서 다른 페이지 열기
onclick ="window.open('index.html')"
현재 페이지 새로고침
onclick ="location.reload();"
뒤로 가기
onclick ="history.back();"
뒤로 1번 가기
onclick ="history.go(-1);"

예시)

목차 Show

달삼쓰뱉
1. HTML의 onclick 속성 사용
2. JavaScript 사용
3. addEventListener() 메소드 사용

<a href="#" onclick="history.back();">뒤로가기</a>

** history.back(), history.go(-1)이 보통은 잘 작동하나 안될시 return false; 를 삽입

(예시 onclick ="history.go(-1); return false;")

질문

html 버튼 누르면 페이지 이동

장고로 웹사이트를 만들고 있습니다.

index.html에 있는 버튼을 누르면 second.html로 이동하게 하고 싶습니다.

어떻게 하면 되는지 알려주세요.

태그 디렉터리Ξ HTML

내 프로필 이미지

질문수263
채택률95.3%
마감률99.2%

닉네임비공개

작성일2021.04.02 조회수 2,303

답변1개

정렬 옵션 채택순

필터 옵션 전체보기

보기 옵션

최적 원문

질문자 채택

1번째 답변

NINE

채택답변수 5,312받은감사수 66

태양신 열심답변자

자바스크립트 3위, HTML 2위, 웹프로그래밍 10위 분야에서 활동

본인 입력 포함 정보

프로필 더보기

알아두세요!

위 답변은 답변작성자가 경험과 지식을 바탕으로 작성한 내용입니다. 포인트로 감사할 때 참고해주세요.

2021.04.02.

포인트로 감사

코딩/IT개발 관련 전문가와 채팅,음성 상담을 하고 싶다면?

코딩/IT개발

eXpert 바로가기

남박사

안녕하세요. 남박사 입니다.

파이썬 코드 수정

판매가 10,000 원 / 작업의뢰 1회

접속중

이병욱

Java 코드를 리뷰해드립니다. ^^

자바, 과제 및 문제 풀이(음성영상)

판매가 30,000 원 / 상담 60분

내소식
공지

질문

내공50

onclick 태그로 버튼클릭시 페이지 이동과 실행소스도 완료되었으면 합니다.

밑에 사진첨부한 것처럼 현재 '등록'이라는 버튼에 a 태그가 잡혀있습니다.

'등록'이라는 버튼을 클릭했을 시, 글이 등록됨과 동시에 원하고자 하는 url 사이트로 지정시켜 이동시키고 싶습니다.

<a href="이동하고자 하는 url" onclick="{$action_write}>~~~

이렇게 소스를 수정하여도 원하는 url로 이동이 되지 않던데 어떻게 해야되나요??

답변하시면 내공 10점을 답변이 채택되면 내공 75점을 드립니다.

답변1개

1번째 답변

클릭 이벤트가 등록되어있으므로, 해당 클릭 이벤트에서 프로세싱 처리 후 링크 이동을 시켜주셔야합니다.

보통의 예시는 이렇습니다.

<a href="javascript_:void(0);" _onClick="actionStart();"> <script src="http://code.jquery.com/jquery-3.4.1.js" ></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script type="text/javascript"> // 액션 실행 함수 function actionStart(){ //form전송 혹은 ajax전송 $.post("./처리될 페이지","처리 데이터",function (_data){ // 요청 성공했을때 if(_data.stat == "success"){ location.href="이동할 페이지" ; // 요청 실패했을때 }else{ alert("에러 메세지 or 출력 메세지") ; return false ; } }) ; } <script>

알아두세요!

위 답변은 답변작성자가 경험과 지식을 바탕으로 작성한 내용입니다. 포인트로 감사할 때 참고해주세요.

2020.03.18.

onClick를 사용하면 된다.

구글에 a button 차이 라고 검색 시 아래와 같이 나온다.

a, button, input type="submit"는 무슨 차이인가

diff between a, button and input type submit 는 '연결' 역할을 한다. 페이지와 페이지를 연결할 때 사용하는 하이퍼링크를 정의할 때 사용한다. 태그에서 가장 중요한 속성은 href로 link의 목적지를 가리킨

humahumahuma.tistory.com

달삼쓰뱉

html의 button을 클릭하면 onclick 이벤트가 발생합니다. 코드 작성자는 이를 활용해 버튼이 눌린 경우 javascript 코드를 실행하도록 할 수 있습니다. 이러한 onclick 이벤트를 받는 방법은 크게 세 가지로 html에서 직접 받기, javascript로 받기, addEventListener 활용하기 입니다.

1. HTML의 onclick 속성 사용

이 예제에서는 html onclick 속성을 사용해 javascript 함수를 할당하겠습니다. 웹사이트 사용자가 버튼을 클릭하면 그에 해당하는 함수가 실행될 것이고 화면에 alert 다이얼로그를 보일 것 입니다.

<!DOCTYPE html>
<html>

<body>
  <h2>버튼을 클릭해주세요</h2>

  <button onclick="doAction()">click me</button>

  <script>
    function doAction() {
      alert("Hello World");
    }  
  </script>
</body>

</html>

html button의 onclick 속성에 doAction() 함수를 할당하여 버튼이 눌린 경우 해당하는 스크립트를 실행하도록 했습니다.

결과:

주어진 버튼을 클릭하면 결과:

2. JavaScript 사용

이번에는 javascript의 onclick 이벤트를 사용해 보겠습니다. 웹사이트 사용자가 버튼을 누르면 그 버튼에 해당하는 javascript 코드가 실행되고 위의 예제와 동일하게 alert 다이얼로그가 뜨도록 하겠습니다.

<!DOCTYPE html>
<html>

<body>
  <h2>아래 버튼을 클릭해주세요</h2>

  <button id="my-button">안녕</button>

  <script>
    document.getElementById("my-button").onclick = function () {
      alert("Hello World");
    };
  </script>
</body>

</html>

위 코드에서는 my-button을 id로 가지는 html 항목을 javascript getElementById() 메소드로 가져와서 onclick에 지정한 스크립트를 할당했습니다.

결과:

안녕 버튼을 누르면:

3. addEventListener() 메소드 사용

이번 예제에서는 javascript의 addEventListener() 메소드를 사용하여 버튼에 click 이벤트를 추가할 것 입니다. 사용자가 버튼을 클릭하면 해당하는 javascript 코드가 실행되도록 해보겠습니다.

<!DOCTYPE html>
<html>

<body>
  <h2>배경색을 바꿔주세요</h2>

  <button id="my-button">버튼</button>

  <script>
    const myButton = document.getElementById("my-button");

    myButton.addEventListener('click', () => {
      document.body.style.backgroundColor = 'red';
    });
  </script>
</body>

</html>

위의 코드에서는 addEventListener() 메소드를 사용해 click 이벤트를 추가하고 해당하는 javascript 함수를 할당했습니다. 이번에는 alert 다이얼로그를 보이지 않고 배경을 빨간색으로 바꿨습니다.

결과:

버튼을 누르면:

정리

html:

<element onclick = "doAction()">

javascript:

object.onclick = function() { myScript };

addEventListener() 메소드를 사용한 javascript

object.addEventListener("click", myScript);

HTML 페이지 이동

Html 버튼 클릭시 페이지 이동 - html beoteun keulligsi peiji idong

답변1개

답변1개

달삼쓰뱉

1. HTML의 onclick 속성 사용

2. JavaScript 사용

3. addEventListener() 메소드 사용

정리

관련 게시물

한글 쪽수 줄이기 - hangeul jjogsu jul-igi

윈도우 화면전환 단축키 - windou hwamyeonjeonhwan danchugki

마비노기 컨트롤키 안됨 - mabinogi keonteulolki andoem

일러스트 드래그 이동 안됨 - illeoseuteu deulaegeu idong andoem

Jquery 스와이프 이벤트 - jquery seuwaipeu ibenteu

아스트로니어 내핵 가는법 - aseuteulonieo naehaeg ganeunbeob

마인크래프트 스폰포인트 제거 - mainkeulaepeuteu seuponpointeu jegeo

포토샵 레이어 다른 창으로 복사 - potosyab leieo daleun chang-eulo bogsa

체스 퀸 이동 - cheseu kwin idong

아크 싱글 서버이동 - akeu sing-geul seobeoidong

광고하는

최근 소식

한국 가상 전화번호 만들기 - hangug gasang jeonhwabeonho mandeulgi

이케아 매트리스 방수커버 - ikea maeteuliseu bangsukeobeo

안드로이드 아이폰 벨소리 다운 - andeuloideu aipon belsoli daun

2옥 라 디시 - 2og la disi

디저트페어 2022 - dijeoteupeeo 2022

카카오톡 pc 페이스톡 카메라 오류 - kakaotog pc peiseutog kamela olyu

아스트로니어 테더 설치 - aseuteulonieo tedeo seolchi

우크라이나 우회 지원 - ukeulaina uhoe jiwon

스페이스마린 식사 - seupeiseumalin sigsa

낫또 이소 플라본 - nastto iso peullabon

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의