Still confused on localStorage

JavaScript
31

This is kind of a simple question but, I’m trying to make a function where it gets the next items in an object array, and cycles through the next item on a Submit. However, it looks like what I’m trying to do is not working in my addToDom function, and I’m getting returned undefined

A Pen by Brandon (codepen.io)

33

whoops mb I meant to delete that, thank you. I was trying to parse the localstorage item so I can retrieve it for later

1 Like
35

Right, on that last part I’m trying to assign the length of array to index so I can cycle through array when I create elements to load into the DOM, so that I can reference the state which is the object array

1 Like
36

Overall, I thought the steps that @colinthornton is suggesting were to:

  • Submit a new task
    *update the state by pushing it to the array and create an array of objects to use as a foundational to build from my DOM/save localstorage from.
    *render it to the dom (which is what I’m trying to figure out right now)
  • save it to localStorage
38

Oh okay, gotcha. So it looks like that your blurred example is using nietos, but I was wondering how your explanation and steps can tie into this JavaScript code linked down here.

A Pen by Brandon (codepen.io)

40

Hmm… I’m not sure if your example is working. When I try to implement your code, it looks like I’m getting an error message that says, "app.js:10

   Uncaught TypeError: Cannot read properties of null (reading 'value')
at HTMLButtonElement.submit (app.js:10:26)"

A Pen by Brandon (codepen.io)

42

Err my bad, I meant I just copied and pasted your code into an empty app.js folder (without my previous code inside) and it wasn’t working. I’m just checking to see what your code does before I start to implement it so I have a better idea of what to do

43

yeahh I think I’m still stuck lol. I tried integrating the code but… oof, I’m not sure where I can even start. I guess it’s like I’m not really understanding how the explanations relate to my code for LS. I don’t want to give up, but man this is tough.

1 Like
45

A Pen by Brandon (codepen.io) here it is

1 Like
46

Alright so I’m trying to figure out how to set created variables to localstorage myself (without looking at the blurred code, or logic explanation) and this is what I have so far. A Pen by Brandon (codepen.io)

1 Like
48

Thank! In the meantime, I followed your logic steps and this is what I have so far with my code

A Pen by Brandon (codepen.io)

1 Like
50

Alright, gotcha. How’s this, now? I made sure to update the stuff that you told me and added that new function A Pen by Brandon (codepen.io)

1 Like
52

Oh okay, so take off the p.innerHTML then, correct?

I believe so, yes

Is this the correct DOM element?
const itemInput = document.getElementById("item");
55

Interesting, try it now. It looks like it didn’t save on your end for some reason A Pen by Brandon (codepen.io)

1 Like
57

No, I guess not. Would I assign it itemInput.value?

59

So pretty much in the add function we have to create an object that contains the item value for the paragraphs. Next, in the update function, we need to update localstorage by doing something like localstorage.setItem("key", list) so that it can update. Then finally in the display function we have to create the p elements by looping through the length of list and setting the innerhtml to the value of the object. TBH I’m not really sure why we need to make one p element in the add function because that doesn’t make sense to me. Everything else that I explained here does to an extent (if it’ll work)

1 Like
61

My bad on the first paragraph. So the order in which they should be called will go:

  1. in the submit button: add(),update()
  2. in the window.addeventlister: displayTask()

Actually in the update function, we may have to loop through list in the functionand the possibly splice out each individual item in the array and then assign each array item to the p elements

63

Eer no not addeventlistener I think there’s one where it’s like window.onload or something like that?

66

I think I almost got it, now I have to figure out a way for the add() function to actually trigger a click so it can add it to the page A Pen by Brandon (codepen.io)

1 Like
67

So i’m working through this and I’m a bit confused. I was able to get the add function to create a p variable for the DOM, the update function works well, and the display function works too. However when I use the submit eventlistener on add I can create/append elements to the DOM, but it looks like it doesn’t stay on refresh. I know you said not to have the displayTask function in the submit event listener but I’m not sure how I can get my values to stay if I can’t merge the add function and displayTask function in some way A Pen by Brandon (codepen.io)

EDIT: Actually wait I thought about it some more, and I think I just have to create a copy of all the created p elements in the add function and then push it to the display function somehow on click

1 Like