인프런 커뮤니티 질문&답변
작성한 질문수
JavaScript & jQuery - 검색창 확장하기(3)에서
작성
·
187
1
<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 = '' <<여기서 자꾸 에러가 뜨는데...
뭐가 문제일까요?
답변 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입니다. 참고하셔서 코드를 수정해보시기 바랍니다.
제목: 팝업창이 열리지 않습니다.
링크: 팝업창이 열리지 않습니다.
감사합니다.