function getFirst(item, className) {
    return item.getElementsByClassName(className)[0]
}

for (elem of document.getElementsByTagName("li")) {
    var editBtn = getFirst(elem, "task-value")
    if (editBtn) {
        editBtn.onclick = (event) => {
            event.preventDefault(true);
            var item = event.target.parentNode.parentNode;
            getFirst(item, "view-box").style.display = "none";
            getFirst(item, "edit-box").style.display = "flex";
        }
    }
    var cancelBtn = getFirst(elem, "btn-cancel")
    if (cancelBtn) {
        cancelBtn.onclick = (event) => {
            event.preventDefault(true);
            var item = event.target.parentNode.parentNode;
            getFirst(item, "edit-box").style.display = "none";
            getFirst(item, "view-box").style.display = "flex";
        }
    }
    var markBtn = getFirst(elem, "task-id")
    if (markBtn) {
        markBtn.onclick = (event) => {
            event.target.type = "submit";
            event.target.click();
        }
    }
}

var newBtn = document.getElementById("btn-new")
newBtn.onclick = (event) => {
    event.preventDefault(true);
    var item = event.target.parentNode.parentNode;
    getFirst(item, "view-box").style.display = "none";
    getFirst(item, "edit-box").style.display = "flex";
}
var cancelBtn = document.getElementById("btn-cancel")
cancelBtn.onclick = (event) => {
    event.preventDefault(true);
    var item = event.target.parentNode.parentNode;
    getFirst(item, "edit-box").style.display = "none";
    getFirst(item, "view-box").style.display = "flex";
}