location.href 안먹히는 현상

문제 발견

<button onclick="location.href='/admins/products/create'" class="float-end btn btn-primary mb-3">상품 등록</button>

사진 속 빨간 네모 쳐진 버튼에 대해 위의 코드로 구성되어 있는데

눌러도 location.href로 설정되어 있는 주소로 이동하지 않고 뒤에 ?만 붙는 현상이 발견

 

?만 붙고 새로고침 된다.

 

관리자 모드로 버튼을 찍어보아도 잘 설정되어 있는데 왜 이러는지 모르겠음

 

주소창에서 직접 입력하면 잘 이동된다.

 

해결 방법

계속 새로고침 되는거에서 포인트를 잡아 생각하다 뭐가 문제인지 발견했다.

form 태그 안에 button이 위치해 발생한 문제였음.. 아오

 

HTML

<form>
  <!-- <button onclick="createProducts()" class="float-end btn btn-primary mb-3">상품 등록</button> -->
  <button id="createProduct" class="float-end btn btn-primary mb-3">상품 등록</button>
</form>

JavaScript

// const createProducts = () => {
//   location.href = '/admins/products/create';
//   return false;
// };

document.querySelector('#createProduct').addEventListener('click', (e) => {
  e.preventDefault();
  location.href = '/admins/products/create';
});

주석 처리된 코드가 기존의 안되던 코드.

진짜 별거 아닌건데 html에서 js 제어하다 잊을만하면 겪는 문제라

만날때마다 짜증난다.

 

그래도 금방 파악해서 다행