Calling any Javascriot experts?

Anyone a whiz with Javascript/HTML/CSS

In particular event listeners and storing text entry into local storage!

Going to need a bit more info.

Events are pretty standard. Local storage would be a cookie.

No cookies involved here. Its directly writing to local storage.

Il see if I can post my code up at lunchtine

Ahh right, so you mean the LocalStorage object not just “some local storage”

Yeah, code would be good.

1 Like

Wasnt able to get sorted at lunch. Any tips appreciated.

Here is an image of the web page so you can picture.

strong text

You can see. The first three boxes were created as part of the page. These will be commented out eventually. But I have clicked on add entry. And I want to get the local storage to reflect what is typed in the data entry. So effectively updating as new characters are added.
Il whack the code I think is relevant below. I have added the line localStorage.setItem line. Key is already defined elsewhere. So I am trying to pass the tex value into a function or something so that it updates the local storage also with whatever text is input when a new add entry is created. Help!

// Add a text entry to the page
function addTextEntry(key, text, isNewEntry) {
// Create a textarea element to edit the entry
var textareaElement = document.createElement(“TEXTAREA”);
textareaElement.rows = 5;
textareaElement.placeholder = “(new entry)”;

// Set the textarea’s value to the given text (if any)
textareaElement.value = text;

// Add a section to the page containing the textarea
addSection(key, textareaElement);

// If this is a new entry (added by the user clicking a button)
// move the focus to the textarea to encourage typing
if (isNewEntry) {
textareaElement.focus();
}

localStorage.setItem(key, textareaElement.value);

}

Have gone with this.

textareaElement.onchange = function () {
textareaElement = this.value
localStorage.setItem(key, textareaElement);
}

You are going to need to hook in the “onkeyup” event to your textareaElement. This can be done when you create it, or after using JS. You will need to set the id of the textareaElement to your key so it is unique otherwise if you have more than one element they will all get updated at once.

https://www.w3schools.com/code/tryit.asp?filename=GCPEZJGUIM8P

For this to fire you would need to lose focus. To quote the spec:

So effectively updating as new characters are added.

:wink:

Cheers @n0tch

Already a script doing some key thingymabobs.

Challenge I have now is recalling these entries from local storage so they are there when I reload the page. Lucky I have bottle of red to help me through this cursed challenge

1 Like

bottle of wine has not helped :frowning:
I dont think my original solution is correct!

Do have to wonder why they’re not teaching Cache and Service Worker API’s instead.

localStorage is verging on being pointless, as it can only be run synchronously, which is inefficient.

Also it making sites very vulnerable to XSS attacks isn’t great.

Aside from that - retrieval should just be a case of utilising a check to see if localStorage is available in the window, then making a call with getItem to a recognised string (i think, been a while).

Its an introduction to Javascript and HTML and web technologies. I think the emphasis is on linking between different functions, variables, elements within HTML etc as opposed to the relevance of using localStorage.

Of which I seem to be failing badly at the moment!

Need help with other aspects? Happy to help.

If you are trying to learn, happy to give pointers rather than actual solutions.

Just realised I used “Happy” and “Help” quite a lot there.

2 Likes