local storage not giving correct results

Question

i am trying to build post it notes. I am reading Head First Series. I did this code. but somehow it's no working.

<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>

And here is the 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);
        }
    }


}

So i've buld up a fiddle so that you can easily check it out Here is the Fiddle Please tell me where i am doing it wrong. Thanks.

_function addStickyToPage(value)_ you pass value in this function but you do nothing with it — The Reason, Jun 10 '15 at 14:09

score 1 · Accepted Answer · answered Jun 10 '15 at 14:17

1

I have updated your Fiddle. Note : first you should create DOM element and then append text to this element and finally append this node to you body so your code should be like this:

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);
    }

And also windows.onload = init()with brackets

Thanks

answered Jun 10 '15 at 14:17

The Reason

7,705
4
24
42

thanks but Please explain this to me var t = document.createTextNode(value); – Cloudboy22 Jun 10 '15 at 14:31
What you just did here? – Cloudboy22 Jun 10 '15 at 14:31
Ok So you created Text...?? – Cloudboy22 Jun 10 '15 at 14:32
_createTextNode_ it appends your text from textbox to your _sticky_ [here](https://developer.mozilla.org/ru/docs/Web/API/Document/createTextNode) you can read about this function – The Reason Jun 10 '15 at 14:34
can i use innerHtml here?? – Cloudboy22 Jun 10 '15 at 14:35
[here](http://stackoverflow.com/questions/13122760/is-there-any-major-difference-between-innerhtml-and-using-createtextnode-to-fill) good explanation about it – The Reason Jun 10 '15 at 14:37

local storage not giving correct results

1 Answers1