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()
运行结果