Click here to Skip to main content
15,789,776 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I am making a note taking app:
Basic HTML:
  <input type = "text" id = "noteinput">
     <button id = "takenote">Add</button>
<b<h1 id = "print"></h1>

Here is the javascirpt:
var takeNote = document.getElementById('takenote');

takeNote.addEventListener('click', () =>{
    var date = Date();
var post = document.getElementById("noteinput").value;
    document.getElementById("print").innerHTML = `Note to self: ${post}`;
        var savedUserData = localStorage.getItem('userInputValue');
        document.getElementById("print").innerHTML = savedUserData;

It takes the user input and displays it on the screen, even after the page has been reloaded.
But, my question is, how do I do multiple input and stack that input on top of the last?

What I have tried:

I really dont know what to try, so please help.
Updated 21-Aug-20 7:34am

1 solution

Looking at your code, mostly it is around using localstorage via Javascript. For your stack of notes:
1. Use arrays to store data in localstorage
2. Use JSON.stringify() to convert data array into string
3. Use JSON.parse() to convert back for manpulations

Reference: How to Use Local Storage with JavaScript - Integrating local storage[^]

Try out!
Share this answer
[no name] 21-Aug-20 12:47pm    
Thank you very much, but I am still a little confused.
[no name] 21-Aug-20 13:04pm    
Do you think you could just show me how to implement that into my code please?
Sandeep Mewara 21-Aug-20 13:26pm    
I gave a url that has all the details. Please have a look at it and then just do it. I don't see why would you get stuck. Please try.
[no name] 21-Aug-20 13:32pm    
Ok I will try.
[no name] 21-Aug-20 13:48pm    
I am so sorry, I can't seem to get it to work :(

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900