JavaScript & jQuery - 검색창 확장하기(3)에서
299
6 asked
<body>
<div class="container">
<header>
<div class="logo">
<img src="logo.png" href="#none">
</div>
<div class="search active">
<!-- x버튼 -->
<span class="clear"><i class="xi-close-thin"></i></span>
<!-- 돋보기 -->
<div class="icon"><i class="xi-search"></i></div>
<div class="input-frame">
<input type="text" id="searchInput" placeholder="Type Here...">
</div>
</div>
</header>
<section>
<h1>This is Section #01</h1>
<p>
Lorem
</p>
</section>
<section>
<h1>This is Section #02</h1>
<p>
Lorem
</p>
</section>
</div>
<script>
var icon = document.querySelector('.icon'),
search = document.querySelector('.search'),
clear = document.querySelector('.clear'),
searchInput = document.querySelector('.searchInput');
icon.onclick = function(){
search.classList.toggle('active')
}
clear.onclick = function(){
searchInput.value = ''
}
</script>
</body>돋보기까지는 실행이 되는데
텍스트 작성후 x버튼 눌렀을때 지워지지 않아요.
searchInput.value = '' <<여기서 자꾸 에러가 뜨는데...
뭐가 문제일까요?
Answer 2
1
다음에 질문 주실때는 html,css,js 전체코드를 올려주세요.
이렇게 부분적인 코드로는 확인하려면 시간이 많이 걸립니다.
html에서는 id로 설정하고 자바스크립트에서는 클래스로 변수를 선언해서 그런것같습니다.
<input type="text" id="searchInput" placeholder="Type Here...">
searchInput = document.querySelector('.searchInput')
아이디로 선언했으니까 아래처럼 해주세요.
searchInput = document.getElementById('searchInput')
0
안녕하세요, 인프런 AI 인턴입니다.
원스텝님의 질문에 대한 유사한 문제가 이전에 다루어진 적이 있으니, 해당 내용을 참고하시면 도움이 될 것 같습니다.
질문자분의 문제는 JavaScript에서 document.querySelector를 사용하여 DOM 요소를 선택할 때 발생한 오타로 보입니다. searchInput 변수를 선언할 때 document.querySelector('.searchInput')에서 클래스 선택자를 .searchInput으로 사용하셨는데, 실제 HTML에는 id="searchInput"로 되어 있습니다. 따라서 클래스 선택자가 아닌 ID 선택자인 #searchInput을 사용해야 합니다.
아래는 유사한 문제를 다룬 게시물의 URL입니다. 참고하셔서 코드를 수정해보시기 바랍니다.
제목: 팝업창이 열리지 않습니다.
링크: 팝업창이 열리지 않습니다.
감사합니다.
pointer-event:none;
1
61
1
실전 반응형 웹사이트 이미지 다운
1
59
2
87.JavaScript & jQuery - 유효성 체크 애니메이션 로그인폼(3)
1
44
2
목소리 좀 키워주세요.
1
119
2
PDF파일은 어디있나요?
1
170
2
실전 반응형 웹사이트
1
151
2
강의 내용 pdf가 제공되나요?
1
167
1
flex 가 부트스트랩 5 에 추가되었는데 float 를 실무에서 아직 많이 사용하나요 ?
1
214
1
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ?
1
187
1
실전퍼블리싱 카테고리 탭메뉴 안에 Slick.js가 안먹힙니다ㅠㅠ
1
383
2
scss에 active 적용하는 방법
1
314
1
반응형이 안먹힐때 뭐가 문제일까요?? ㅜㅠ
1
1169
2
실전 넷플릭스 6 footer부분
1
261
2
.dark 적용 하는 법
1
206
1
포트폴리오 CSS Grid 반응형 레이아웃에서
1
284
1
폰트어썸 4.7 아이콘
2
466
1
넷플릭스 공식사이트 수업 header
1
226
1
JavaScript & jQuery - 푸터 패밀리사이트 셀렉트 커스텀 스타일(2)
1
548
2
loginForm input type=email, password 위치 css 오류
2
413
1
이미지 전환 후 잔상 효과
1
1293
4
안녕하세요. jquery 슬라이더에 대해 질문 있습니다.
1
291
1
btn 을 block 이 아닌 inline-block 으로 바꾸신 이유가 궁금합니다
1
483
1
flex나 grid 로 구현하는것과 비교하면 어떤가요?
1
413
1
계속 로딩 - [제작노트 및 필수사항] 실전 반응형 웹사이트 - 넷플릭스 공식사이트
2
362
1