편집 기록

편집 기록
  • 프로필 엽토군님의 편집
    날짜2021.10.07

    다른 탭에서도 todo list를 사용할 수 있는 방법이 있을까요 ? - javascript


    todo list를 두 가지 목적(프로젝트, 개인)으로 사용할 수 있도록 javascript, html, css로 제작 중 인데요. 번갈아 가며 사용 가능해야 하는데 , 첫 번째 탭에서는 정상 작동하나, 두 번째 탭에서 작동하지 않습니다. 실행하자 마자 두번째 탭을 먼저 들어가도 작동하지 않습니다. 제 생각엔 실행 순서에 문제가 있는 것 같지만, 아닐 수도 있습니다... 어떻게 고칠 수 있을까요 ? 하단은 javascript의 코드입니다 !

    const todoObjectList1 = [];
    const todoObjectList2 = [];
    
    // 탭 전환
    
    $(".menu1").click(function(){
        $(this).addClass('on');
        $(".menu2").removeClass("on");
    })
    
    $(".menu2").click(function(){
        $(this).addClass('on');
        $(".menu1").removeClass("on");
    })
    
    // project todo
    
    class Todo_Class1 {
        constructor(item){
            this.ulElement1 =item;
        }
    
        add() {
            const todoInput1 = document.querySelector("#myInput1").value;
            if (todoInput1 == "") {
                alert("You did not enter any item!") 
            } else {
                const todoObject1 = {
                    id1 : todoObjectList1.length,
                    todoText1 : todoInput1,
                    isDone1 : false,
                }
    
            todoObjectList1.unshift(todoObject1);
            this.display();
            document.querySelector("#myInput1").value = '';
    
            }
        }
    
        done_undone(x) {
            const selectedTodoIndex1 = todoObjectList1.findIndex((item)=> item.id1 == x);
            console.log(todoObjectList1[selectedTodoIndex1].isDone1);
            todoObjectList1[selectedTodoIndex1].isDone1 == false ? todoObjectList1[selectedTodoIndex1].isDone1 = true : todoObjectList1[selectedTodoIndex1].isDone1 = false;
            this.display();
        }
    
        deleteElement(z) {
            const selectedDelIndex1 = todoObjectList1.findIndex((item)=> item.id1 == z);
    
            todoObjectList1.splice(selectedDelIndex1,1);
    
            this.display();
        }
    
    
        display() {
            this.ulElement1.innerHTML = "";
    
            todoObjectList1.forEach((object_item1) => {
    
                const liElement1 = document.createElement("li");
                const delBtn1 = document.createElement("i");
    
                liElement1.innerText = object_item1.todoText1;
                liElement1.setAttribute("data-id1", object_item1.id1);
    
                delBtn1.setAttribute("data-id1", object_item1.id1);
                delBtn1.classList.add("far", "fa-trash-alt");
    
                liElement1.appendChild(delBtn1);
    
                delBtn1.addEventListener("click", function(e) {
                    const deleteId1 = e.target.getAttribute("data-id1");
                    myTodoList1.deleteElement(deleteId1);
                })
    
                liElement1.addEventListener("click", function(e) {
                    const selectedId1 = e.target.getAttribute("data-id1");
                    myTodoList1.done_undone(selectedId1);
                })
    
                if (object_item1.isDone) {
                    liElement1.classList.add("checked");
                }
    
                this.ulElement1.appendChild(liElement1);
            })
        }
    } 
    
    // personal todo
    
    class Todo_Class2 {
        constructor(item){
            this.ulElement2 =item;
        }
    
        add() {
            const todoInput2 = document.querySelector("#myInput2").value;
            if (todoInput2 == "") {
                alert("You did not enter any item!") 
            } else {
                const todoObject2 = {
                    id2 : todoObjectList2.length,
                    todoText2 : todoInput2,
                    isDone2 : false,
                }
    
            todoObjectList1.unshift(todoObject2);
            this.display();
            document.querySelector("#myInput2").value = '';
    
            }
        }
    
        done_undone(x) {
            const selectedTodoIndex2 = todoObjectList2.findIndex((item)=> item.id2 == x);
            console.log(todoObjectList2[selectedTodoIndex2].isDone2);
            todoObjectList2[selectedTodoIndex2].isDone2 == false ? todoObjectList1[selectedTodoIndex2].isDone2 = true : todoObjectList2[selectedTodoIndex2].isDone2 = false;
            this.display();
        }
    
        deleteElement(z) {
            const selectedDelIndex2 = todoObjectList2.findIndex((item)=> item.id2 == z);
    
            todoObjectList2.splice(selectedDelIndex2,1);
    
            this.display();
        }
    
    
        display() {
            this.ulElement2.innerHTML = "";
    
            todoObjectList2.forEach((object_item2) => {
    
                const liElement2 = document.createElement("li");
                const delBtn2 = document.createElement("i");
    
                liElement2.innerText = object_item2.todoText2;
                liElement2.setAttribute("data-id2", object_item2.id2);
    
                delBtn2.setAttribute("data-id2", object_item1.id2);
                delBtn2.classList.add("far", "fa-trash-alt");
    
                liElement2.appendChild(delBtn2);
    
                delBtn2.addEventListener("click", function(e) {
                    const deleteId2 = e.target.getAttribute("data-id2");
                    myTodoList2.deleteElement(deleteId2);
                })
    
                liElement2.addEventListener("click", function(e) {
                    const selectedId2 = e.target.getAttribute("data-id2");
                    myTodoList1.done_undone(selectedId2);
                })
    
                if (object_item2.isDone) {
                    liElement2.classList.add("checked");
                }
    
                this.ulElement2.appendChild(liElement2);
            })
        }
    }
    
    ////-----MAIN PROGRAM------------
    
    const listSection1 = document.querySelector("#myUL1");
    
    myTodoList1 = new Todo_Class1(listSection1);
    
    // project todo add
    
    document.querySelector(".addBtn1").addEventListener("click", function() {
        myTodoList1.add()
    })
    
    document.querySelector("#myInput1").addEventListener("keydown", function(e) {
        if (e.keyCode == 13) {
            myTodoList1.add()
        }
    })
    
    // personal todo add
    
    const listSection2 = document.querySelector("#myUL2");
    
    myTodoList2 = new Todo_Class2(listSection2);
    
    
    document.querySelector(".addBtn2").addEventListener("click", function() {
        myTodoList2.add()
    })
    
    document.querySelector("#myInput2").addEventListener("keydown", function(e) {
        if (e.keyCode == 13) {
            myTodoList2.add()
        }
    })
    
  • 프로필 알 수 없는 사용자님의 편집
    날짜2021.10.06

    다른 탭에서도 todo list를 사용할 수 있는 방법이 있을까요 ? - javascript


    todo list를 두 가지 목적(프로젝트, 개인)으로 사용할 수 있도록 javascript, html, css로 제작 중 인데요. 번갈아 가며 사용 가능해야 하는데 , 첫 번째 탭에서는 정상 작동하나, 두 번째 탭에서 작동하지 않습니다. 실행하자 마자 두번째 탭을 먼저 들어가도 작동하지 않습니다. 제 생각엔 실행 순서에 문제가 있는 것 같지만, 아닐 수도 있습니다... 어떻게 고칠 수 있을까요 ? 하단은 javascript의 코드입니다 !

    '''const todoObjectList1 = []; const todoObjectList2 = [];

    // 탭 전환

    $(".menu1").click(function(){ $(this).addClass('on'); $(".menu2").removeClass("on"); })

    $(".menu2").click(function(){ $(this).addClass('on'); $(".menu1").removeClass("on"); })

    // project todo

    class Todo_Class1 { constructor(item){ this.ulElement1 =item; }

    add() {
        const todoInput1 = document.querySelector("#myInput1").value;
        if (todoInput1 == "") {
            alert("You did not enter any item!") 
        } else {
            const todoObject1 = {
                id1 : todoObjectList1.length,
                todoText1 : todoInput1,
                isDone1 : false,
            }
    
        todoObjectList1.unshift(todoObject1);
        this.display();
        document.querySelector("#myInput1").value = '';
    
        }
    }
    
    done_undone(x) {
        const selectedTodoIndex1 = todoObjectList1.findIndex((item)=> item.id1 == x);
        console.log(todoObjectList1[selectedTodoIndex1].isDone1);
        todoObjectList1[selectedTodoIndex1].isDone1 == false ? todoObjectList1[selectedTodoIndex1].isDone1 = true : todoObjectList1[selectedTodoIndex1].isDone1 = false;
        this.display();
    }
    
    deleteElement(z) {
        const selectedDelIndex1 = todoObjectList1.findIndex((item)=> item.id1 == z);
    
        todoObjectList1.splice(selectedDelIndex1,1);
    
        this.display();
    }
    
    
    display() {
        this.ulElement1.innerHTML = "";
    
        todoObjectList1.forEach((object_item1) => {
    
            const liElement1 = document.createElement("li");
            const delBtn1 = document.createElement("i");
    
            liElement1.innerText = object_item1.todoText1;
            liElement1.setAttribute("data-id1", object_item1.id1);
    
            delBtn1.setAttribute("data-id1", object_item1.id1);
            delBtn1.classList.add("far", "fa-trash-alt");
    
            liElement1.appendChild(delBtn1);
    
            delBtn1.addEventListener("click", function(e) {
                const deleteId1 = e.target.getAttribute("data-id1");
                myTodoList1.deleteElement(deleteId1);
            })
    
            liElement1.addEventListener("click", function(e) {
                const selectedId1 = e.target.getAttribute("data-id1");
                myTodoList1.done_undone(selectedId1);
            })
    
            if (object_item1.isDone) {
                liElement1.classList.add("checked");
            }
    
            this.ulElement1.appendChild(liElement1);
        })
    }
    

    }

    // personal todo

    class Todo_Class2 { constructor(item){ this.ulElement2 =item; }

    add() {
        const todoInput2 = document.querySelector("#myInput2").value;
        if (todoInput2 == "") {
            alert("You did not enter any item!") 
        } else {
            const todoObject2 = {
                id2 : todoObjectList2.length,
                todoText2 : todoInput2,
                isDone2 : false,
            }
    
        todoObjectList1.unshift(todoObject2);
        this.display();
        document.querySelector("#myInput2").value = '';
    
        }
    }
    
    done_undone(x) {
        const selectedTodoIndex2 = todoObjectList2.findIndex((item)=> item.id2 == x);
        console.log(todoObjectList2[selectedTodoIndex2].isDone2);
        todoObjectList2[selectedTodoIndex2].isDone2 == false ? todoObjectList1[selectedTodoIndex2].isDone2 = true : todoObjectList2[selectedTodoIndex2].isDone2 = false;
        this.display();
    }
    
    deleteElement(z) {
        const selectedDelIndex2 = todoObjectList2.findIndex((item)=> item.id2 == z);
    
        todoObjectList2.splice(selectedDelIndex2,1);
    
        this.display();
    }
    
    
    display() {
        this.ulElement2.innerHTML = "";
    
        todoObjectList2.forEach((object_item2) => {
    
            const liElement2 = document.createElement("li");
            const delBtn2 = document.createElement("i");
    
            liElement2.innerText = object_item2.todoText2;
            liElement2.setAttribute("data-id2", object_item2.id2);
    
            delBtn2.setAttribute("data-id2", object_item1.id2);
            delBtn2.classList.add("far", "fa-trash-alt");
    
            liElement2.appendChild(delBtn2);
    
            delBtn2.addEventListener("click", function(e) {
                const deleteId2 = e.target.getAttribute("data-id2");
                myTodoList2.deleteElement(deleteId2);
            })
    
            liElement2.addEventListener("click", function(e) {
                const selectedId2 = e.target.getAttribute("data-id2");
                myTodoList1.done_undone(selectedId2);
            })
    
            if (object_item2.isDone) {
                liElement2.classList.add("checked");
            }
    
            this.ulElement2.appendChild(liElement2);
        })
    }
    

    }

    ////-----MAIN PROGRAM------------

    const listSection1 = document.querySelector("#myUL1");

    myTodoList1 = new Todo_Class1(listSection1);

    // project todo add

    document.querySelector(".addBtn1").addEventListener("click", function() { myTodoList1.add() })

    document.querySelector("#myInput1").addEventListener("keydown", function(e) { if (e.keyCode == 13) { myTodoList1.add() } })

    // personal todo add

    const listSection2 = document.querySelector("#myUL2");

    myTodoList2 = new Todo_Class2(listSection2);

    document.querySelector(".addBtn2").addEventListener("click", function() { myTodoList2.add() })

    document.querySelector("#myInput2").addEventListener("keydown", function(e) { if (e.keyCode == 13) { myTodoList2.add() } })'''