Question

我正在尝试构建便利贴。我正在阅读Head First Series。我做了这个代码。但不知怎的，它不起作用。

<form action="post">
    <input id="note_text" type="text" placeholder="enter your Note">
    <input type="button" id="add_button" value="Add Note">

</form>
<ul id="postItNotesList">

    <li>This is my very first note.</li>

    <li>This is my very Second note.</li>

</ul>

这是Js

window.onload=init;

// Add Sticky to Page

function addStickyToPage(value) {
    var sticky = document.createElement("li");
    span.setAttribute("class", "sticky");
    document.getElementById("postItNotesList").appendChild(sticky);
}



// Create and get Sticky Note into the localStorage
function createSticky() {
    var value = document.getElementById("note_text").value;
    var key = "sticky_" + localStorage.length;
    localStorage.setItem(key, value);
    addStickyToPage(value);
}



function init() {

    var button = document.getElementById("add_button");
    button.onclick = createSticky;



    for (var i = 0; i < localStorage.length; i++) {
        var key = localStorage.key(i);
        if (key.substring(0, 6) == "sticky") {
            var value = localStorage.getItem(key);
            addStickyToPage(value);
        }
    }


}

所以我把小提琴弄得一团糟，这样你就可以轻松地检查出来这是 Fiddle 请告诉我我在哪里做错了。感谢。

Answer 1

我已更新您的Fiddle。注意：首先你应该创建DOM元素然后将 text 附加到这个元素，最后将这个节点附加到你的身体，所以你的代码应该是这样的：

window.onload=init();

    function addStickyToPage(value) {
        var sticky = document.createElement("li");
        sticky.setAttribute("class", "sticky");
        var t = document.createTextNode(value);
        console.log(t);
        sticky.appendChild(t);
        document.getElementById("postItNotesList").appendChild(sticky);
    }

还有windows.onload = init()括号

由于

本地存储没有给出正确的结果

1 个答案: