1st School Project : SoftWare_Engineering Small Community Site_0530 Uncaught TypeError: Illegal constructor
Status Quo
Code
import { getHtmlElemByClassNm} from './utils/index.js'
// 검색 기능
const postProcessor = class {
searchTargets: any;
searchTitleElem : HTMLInputElement = new HTMLInputElement();
constructor(){
this.searchTargets = document.querySelectorAll('[data-search]') as NodeListOf<HTMLElement>
this.searchTitleElem = getHtmlElemByClassNm('post-search-input',document) as HTMLInputElement
}
searchTitle(){
let query = this.searchTitleElem.value
this.searchTargets.forEach((post:HTMLElement)=>{
let postTitle = getHtmlElemByClassNm('title',post)?.textContent
query.split('').map(word=>{
if(postTitle!.toLowerCase().indexOf(word.toLowerCase())!=-1){ //항목 포함
if(post.classList.contains('hidden'))post.classList.remove('hidden')
}else{
if(!post.classList.contains('hidden'))post.classList.add('hidden')
}
})
})
}
connectEvtHandler(){
this.searchTitleElem.addEventListener('keydown',this.searchTitle)
}
}
const postProcessorInst = new postProcessor()
postProcessorInst.searchTitle()
Solution
From
searchTitleElem : HTMLInputElement = new HTMLInputElement();
To
searchTitleElem : HTMLInputElement|null = null;
Link
https://stackoverflow.com/questions/26220243/instantiating-new-htmlelement-in-typescript
WHY ?
searchTitleElem : HTMLInputElement = new HTMLInputElement();
All the HTMLELements (ex, HTMLDiv ... ) has constructor in itself
HTMLInputElement()
has constructor initself
BUT
You can't construct DOM elements using normal constructors because you're supposed to go through document.createElement. This is basically for technical reasons relating to how browsers implement these objects.
For example
searchTitleElem = document.createElement('div') as HTMLDivElement
BUT
What I want here is to assign specific 'type' ,
so code written for solution might be the ideal case
Author And Source
이 문제에 관하여(1st School Project : SoftWare_Engineering Small Community Site_0530 Uncaught TypeError: Illegal constructor), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dhsys112/1st-School-Project-SoftWareEngineering-Small-Community-Site0530-Uncaught-TypeError-Illegal-constructor저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)