whats problem in my code?
"Uncaught TypeError: Cannot read properties of undefined (reading ‘remove’)" this error, and also "Uncaught TypeError: Cannot read properties of undefined (reading ‘add’)"
.hide{
display: none;
}<body>
<div >
<input type= "text" id="elastic" placeholder="Search">
</div>
<div >
<ul class="elastic">
<li>ht</li>
<li>sdf</li>
<li>qwe</li>
<li>cxv</li>
<li>sad</li>
<li>sdf</li>
<li>dfg</li>
</ul>
</div>
<script type="text/javascript">
document.querySelector('#elastic').oninput = function(){
let val = this.value.trim();
let elasticItem = Array.from(document.querySelectorAll('.elastic li'));
if (val != ''){
elasticItem.forEach(function(elem){
if (elem.innerText.search(val) == -1){
elem.classlist.add('hide');
}
else {
elem.classlist.remove('hide');
}
});
}
}
</script>
</body>>Solution :
JavaScript is case-sensitive
Change elem.classlist to elem.classList (l → L)
elem.classList.add('hide');
elem.classList.remove('hide');