5월 31일 TIL (2) - input창 버튼 누를때마다 reload 현상 막기

TIL을 두개나 적다니 ... 임시저장하고 낼 올릴까 고민했지만 일단 적기 ㅠ 

 

오늘자 첫번째 오류) 만든 웹이 input창의 버튼 누를때마다 reload가 되어 input.value로 빼온 값을 계속 튕겨버리는 현상

<form action="">
        <input type="text" placeholder="search for movies.." />
        <button id="search_btn" onclick="search()">검색</button>
</form>

 이런식으로 form 태그 안에 input과 button 나란히 넣어놓고요 

버튼에 onclick 추가해서 search 함수랑 연결시킴

그래서 input창으로 입력받은 데이터를 쿼리셀렉터로 뽑아와서 value값을 콘솔에 찍어보려고 했다

그런데

const search = function () {
  //input창 버튼에 연결된 함수
  movieSearch(); //input창에 입력된 문자열 받아오는 함수
};

const movieSearch = function () {
  let movieFilter = input.value;
  console.log(movieFilter);
};

input창에 뭐만 입력해서 버튼 누르면 콘솔에 0.1초 찍히고 증발해버림

뭔가 페이지가 버튼 누를때마다 reload가 되는 것 같았음

 

button의 type이 디폴트로 sumbit이라는걸 어렴풋이 기억해내서 폭풍 구글링함 

역시나 type문제였다. 또 button이 form 태그 안에 있으면 페이지가 새로고침이 된다네요.. 몰랐음

 

해결법을 1. form 을 div로 변경하던가 2. button의 type을 submit 에서 button으로 바꾸던가

<button id="search_btn" type="button" onclick="search()">검색</button>

전 2번으로 했습니다... input이 div 안에 있는게 뭔가 이상해... 나에겐

여튼 저러니까 해결완.

 

---

오늘자 두번째 오류)  input태그안의 입력값을 빈값으로밖에 받아오지 못하는 현상

 

이것도 좀 오류 원인 찾으니까 좀 웃겼던,, 

 <input type="text" id="input" placeholder="search for movies.." />

이렇게 input 태그가 있고요

const input = document.getElementById("input").value;

이렇게 getElementById로 input에 들어오는 내부 value값을 input 변수에 선언했다

//searchBtn은 input태그 옆의 버튼을 가리킴
//버튼을 누르면 input 안의 값을 가져와서 소문자로 변환을 한다음
//arr.filter()을 함으로써 arr 안의 tilte 데이터와 내가 입력한 값을 비교해 결과값을 filteredMovies에 넣음

searchBtn.addEventListener("click", () => {
	const inputMovieTitle = input.toLowerCase();
    // console.log(inputMovieTitle);

    const filteredMovies = arr.filter((movies) =>
    movies.title.toLowerCase().includes(inputMovieTitle)
    );
});

이렇게 함수를 만들어 코드 중간에 주석처리된 콘솔을 찍어보니 빈 문자열만 자꾸 찍히고 내가 입력한 값이 찍히지 않았음

이유는 getElementById로 input을 지정해줄때 .value를 같이 적용해버려서 그랬다.

버튼클릭함수가 실행되기 전에 input.value를 이미 찍어놓아 그 빈 값을 가져와버려 계속 빈 문자열이 출력됐던 것

 

const input = document.getElementById("input"); //여기서 .value를 없애고

searchBtn.addEventListener("click", () => {
      const inputMovieTitle = input.value.toLowerCase();  //여기에 .value추가
      // console.log(inputMovieTitle);

      const filteredMovies = arr.filter((movies) =>
        movies.title.toLowerCase().includes(inputMovieTitle)
      );
      // console.log(filteredMovies);
    });

이렇게 고쳐주었다!