스티키 노트를 자바스크립트로 구현하는 중인데 실행이 되지 않아 코드분석을 부탁드립니다.

Question

스티키 노트를 자바스크립트로 구현하는 중인데 실행이 되지 않아 코드분석을 부탁드립니다.

조회수 1349회

javascript

0

싫어요

window.onload = init();
function init(){
    var button = document.getElementById("add_button");
    button.onclick = createSticky();
    var clearButton = document.getElementById("clear_button");
    clearButton.onclick = clearStickyNotes();
    var stickiesArray = getStickiesArray();
    for (var i = 0; i < stickiesArray.length; i++){
        var key = stickiesArray[i];
        var value = JSON.parse(localStorage[key]);
        addStickyToDOM(key,value);
    }
}
function getStickiesArray(){
    var stickiesArray = localStorage.getItem("stickiesArray");
    if (!stickiesArray){
        stickiesArray = [];
        localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
    }else{
        stickiesArray = JSON.parse(stickiesArray);
    }
    return stickiesArray;
}
function createSticky(){
    var stickiesArray = getStickiesArray();
    var value = document.getElementById("note_text").value;
    var colorSelectObj = document.getElementById("note_color");
    var index = colorSelectObj.selectedIndex;
    var currentDate = new Date();
    var key = "sticky_" + currentDate.getTime();
    var stickyObj = {
        "value": value,
        "color": color
    };
    localStorage.setItem(key, JSON.stringify(stickyObj));
    stickiesArray.push(key);
    localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
    addStickyToDom(key, stickyObj);
}
function deleteSticky(e) {
    var key = e.target.id;
    if (e.target.tagName.toLowerCase() == "span") {
        key = e.target.parentNode.id;
    }
    var stickiesArray = getStickiesArray();
    if (stickiesArray) {
        for (var i = 0; i < stickiesArray.length; i++){
            if (key == stickiesArray[i]){
                stickiesArray.splice(i,1);
            }
        }
        localStorage.removeItem(key);
        localStorage.setItem("stickiesArray", JSON.stringify(stickiesArray));
        removeStickyFromDOM(key)
    }
}
function addStickyToDOM(key, stickyObj){
    var stickies = document.getElementById("stickies");
    var sticky = document.createElement("li");
    sticky.setAttribute("id", key);
    sticky.style.backgroundColor = stickyObj.color;
    var span = document.createElement("span");
    span.setAttribute("class", "sticky");
    span.innerHTML = stickyObj.value;
    sticky.appendChild(span);
    stickies.appendChild(sticky);
    sticky.onclick = deleteSticky;
}
function removeStickyFromDOM(key){
    var sticky = document.getElementById("stickies");
    sticky.parentNode.removeChild(sticky);
}
function clearStickyNotes(){
    localStorage.clear();
    var stickyList = document.getElementById("stickies");
    var stickies = stickyList.childNodes;
    for (var i = stickies.length-1; i >= 0; i--){
        stickyList.removeChild(stickies[i]);
    }
    var stickiesArray = getStickiesArray();
};

init 함수는 최초 실행 함수이고 getStickiesArray는 localStorage에 저장된 내용을 불러오는 함수, createSticky는 새로 입력된 값을 stickyObj와 localStorage에 저장하고 deleteSticky는 없애는 기능을 하고 addStickyToDOM은 DOM에 보여지도록 하는 함수, removeStickyFromDOM은 DOM에서 없애는 함수, clearStickyNotes는 모두 없애는 함수입니다.

제대로 작성했다고 생각하는데 로컬이나 jsfiddle에 넣어도 되지가 않더군요. 설마 Web Storage API가 지원되지 않나 확인해봤는데 문제가 없었구요. 아래는 html입니다...시험해보시구 문제점을 발견해 주시면 감사하겠습니다.

<!DOCTYPE html>
<html>
<head>
<title>Sticky Note</title>
<meta charset = "utf-8">
<meta name = "viewpoint" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel = "stylescheet" type="text/css" href="note.css">
<script type='text/javascript' src='note.js'></script>
</head>
<body>
    <form>
        <label for = "note_color">color:</label>
        <select id="note_color">
            <option value="Gold">Yellow</option>
            <option value="PaleGreen">Green</option>
            <option value="LightPink">Pink</option>
            <option value="LightBlue">Blue</option>
        </select>
        <label for = "note_text">Content:</label> <input type = "text" id = "note_text">
        <input type = "button" id = "add_button" value = "add sticky note">
        <input type = "button" id = "clear_button" value = "remove sticky note">
    </form>
    <ul id = "stickies"></ul>
</body>
</html>

(•́ ✖ •̀)
알 수 없는 사용자

댓글 입력

score 0 · Accepted Answer

일부 클릭이벤트 함수 설정과 오타와 지정하지 않은 변수들이 있네요.

먼저

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

를 보시면

window.onload에는 말그대로 함수를 참조하는 값을 넣어줘야합니다.

window.onload = init();  //이건 init을 바로 실행해 버려요. 콘솔로그 확인해보세요.

요걸

window.onload = init;

요렇게 수정하시고,

onclick들도 예를 들면

 button.onclick = createSticky(); //이것 역시 바로 실행해 버립니다. 함수참조 값을 넣어줘야해요.

요것도

 button.onclick = createSticky;

이렇게 수정해야 해요. (); <- 이건 함수를 실행하라는 의미 이기 때문에 리턴값이 onclick에 들어가게 돼고, 결과적으로 null을 받게 돼죠(리턴이 없다면).

나머지 onclick도 이와같이 수정하시고,

addStickyToDom 이것도 오타가 있으니 수정하시고 (addStickyToDOM 으로 createSticky 함수 가장 밑에 있네요)

마지막으로 createSticky 함수에서 color 변수를 선언하지 않았어요. color 값을 가져오게 하면 원하는 방식으로 동작합니다.