JS 로 op.gg접근하기

form을 이용하여 해당 주소로 이동할수 있게 url을 가져와 보왔다.

   <form action="https://www.op.gg/summoners/" method="get">
      <div>
         <input  name="kr" autocomplete="off" type="text" placeholder="소환사명, 소환사명, ..." value="">
      </div>
      <button type="submit">.GG</button>
   </form>

허나 원하는 주소를 가져오지 못하는 상황이 발생했는데,,,

해당 폼에 '느느흐으'라는 검색을 했을때 나오는 검색결과
'https://www.op.gg/summoners?kr=느느흐으'

내가 얻고자하는 검색결과
'https://www.op.gg/summoners/kr/느느흐으'

iuput으로 text를 받을때 원치도 않는 문자가 앞에 '?' 뒤에는 '=' 가 생겨서 원하는 결과를 얻지 못하였다.
그래서 해결방법으로 자바스크립트로 제어해보기로 했다.

자바스크립트로 제어하기

일단 form을 조금 수정해 본다.

<form id="formstyle"  method="get"> // id 지정하기
    <div>
     <input id="kr" autocomplete="off" type="text" placeholder="소환사명, 소환사명, ..." value=""> //id 지정하기
    </div>
    <button type="submit" onclick="frmIn()">.GG</button>
 </form>

form 태그로 받을수있는 'action'값이랑, input의 'name'value를 자바스크립트로 제어'를 시도하기 위해 제거 해주고, form , input에 id를 지정해준다..

자바스크립트 코드

function frmIn(){
  let frm = document.getElementById("formstyle");
  let nickName = document.getElementById("kr").value.trim();
  frm.action = 'https://www.op.gg/summoners/kr/'+nickName;
  frm.submit();
}

코드를 설명하자면

우선 frm 변수에 id로 검색해서 받고자하는 'form' element를 찾아서 저장하고,
nickName에는 id로 검색해서 받고자하는 'input' element를 찾아서 저장합니다.
그다음 frm.action 동작을 'https://www.op.gg/summoners/kr/'+nickName; 이렇게 정의하는데
form의 action 부분이을 구현하고 여기서 제어한다라고 생각하면 이해가 될 것이다.

해당 동작이 실행되면
주소가 'https://www.op.gg/summoners/kr/느느흐으' 이렇게 바로 붙어서 원하는 바를 수행 할 수 있었다.

2번째 방법

해당 방법은 같이 스터디하시는 분이 짠 코드다.

const formStyle = document.querySelector("#formstyle");
const formInput = formStyle.querySelector("input");

function handleSubmit() {
    formStyle.action = `https://www.op.gg/summoners/kr/${formInput.value}`;
}

formStyle.addEventListener("submit", handleSubmit);

코드를 설명하자면

form의 action을 제어하는 handlesSubmit 함수를 선언하고
form에 addEventListener로 sumit 부분에 함수를 넣어 준 것이다.

끝.