1st School Project : SoftWare_Engineering Small Community Site_0530 Uncaught TypeError: Illegal constructor

dhsys112·2021년 5월 31일
0

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;

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

profile
Dream of being "물빵개" ( Go abroad for Dance and Programming)

0개의 댓글