Делаю ToDo приложение. Я нажимаю на кнопку Add и добавляю новую задачу, в div кнопки новой задачи создается кнопка Confirm, и после нажатия на Confirm создаются кнопки Show и Delete. То, что я пишу работает, но как по мне, пишу я отвратительно. Как можно сделать нормальную обработку событий?
Сразу скажу, что пишу на чистом JS. Xочу, чтобы было понимание, зачем столько библиотек создали для JS.
main.js
import {findData, findButton, addTask, confirmTask} from './toDo.js'
const data = findData()
const buttonAdd = findButton("#add")
let addInfo = document.querySelector("#addInfo")
let isTaskAdded = true
let buttonConfirm = undefined
let buttonShow = undefined
buttonAdd.onclick = () => {
if (isTaskAdded) {
addTask(data, isTaskAdded)
addInfo.innerHTML = null
buttonConfirm = findButton("#confirm")
isTaskAdded = false
buttonConfirm.onclick = () => {
confirmTask(data)
isTaskAdded = true
buttonShow = document.querySelector(".show")
buttonShow.onclick = () => {
console.log(buttonShow)
}
}
} else {
addInfo.innerHTML = "Confirm your task before you will add new"
buttonConfirm.onclick = () => {
confirmTask(data)
isTaskAdded = true
buttonShow = document.querySelector(".show")
buttonShow.onclick = () => {
console.log(buttonShow)
}
}
}
}
P.S. На console.log(buttonShow) не обращайте внимания, для дебага написал ее.
