前端学习笔记202309学习笔记第九十七天-typescript知识讲解9

 
interface ITodo{
    id:number,
    content:string,
    completed:boolean
}
 
const oInputText=<HTMLInputElement>document.querySelector('#inputText')
const oAddBtn=document.querySelector('#addBtn')
const oTodoList=document.querySelector('#todoList')
const eventMap=new Map([
    [oAddBtn,handleAddBtnClick],
    [oTodoList,handleListClick],
]
)
 
const init=()=>{
    bindEvent()
}
function bindEvent(){
   eventMap.forEach((handler,el)=>{
    el?.addEventListener("click",handler,false)
   })
}
function handleAddBtnClick(){
    const inputText=oInputText.value
    console.log(1111)
    if(!inputText.trim().length) return
    const oTodoItem=CreateTodoItem({
        id:new Date().getTime(),
        content:inputText,
        completed:false
    })
    oTodoList?.append(oTodoItem)
}
function handleListClick(){
 
}
function CreateTodoItem({id,content,completed}:ITodo){
    const oTodoItem=document.createElement("li")
    oTodoItem.appendChild(createCheckBox(id,completed))
    oTodoItem.appendChild(createContent(id,content))
    oTodoItem.appendChild(createRemoveBun(id))
    return oTodoItem
}
 
function createCheckBox(id:number,completed:boolean){
    const oCheckBox=document.createElement('input')
    oCheckBox.type='checkbox'
    oCheckBox.checked=completed
    oCheckBox.dataset.id=id.toString()
    return oCheckBox
}
 
function createContent(id:number,content:string){
    const oContent=document.createElement('span')
    oContent.innerText=content
    return oContent
}
 
function createRemoveBun(id:number){
    const oRemoveBtn=document.createElement("button")
    oRemoveBtn.innerText='REMOVE'
    return oRemoveBtn
}
init()

运行结果