0

I am a beginner in Javascript. I am building a webpage which has 4 elements, an input field, a saving button and a delete button, and a list. When a users types in the input field and hit the saving button, what he just put in will be displayed in the list. Every time he refreshes the page, past inputs will still be available in the list. I am having trouble with this particular line of code:

rendering_list(JSON.parse(localStorage.getItem("Note")))

Namely, when I put this function call at the end of the document, the page works just fine. However, when I put it where it is in the codes below, the whole page does not work. Could you tell me what the problem is here? Thank you

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="leadChromeExtension.css">
</head>
<body>
    <input type="text">
    <div>
        <button id="lead_saving">Save lead</button>
        <button id="lead_deleting">Delete lead</button>
    </div>
    <ul></ul>
    <script src="leadChromeExtension.js"></script>
</body>
</html>

CSS

*{
    margin: 0;
    box-sizing: border-box;
}

body{
    min-height: 100vh;
    padding-top: 10px;
    padding-left: 10px;
}

input{
    width: 300px;
    margin-bottom: 10px;
}

Javascript

let lead_list=[]
let input_field = document.querySelector("input")
let saving = document.getElementById("lead_saving")
let deleting = document.getElementById("lead_deleting")

let ul_el = document.querySelector("ul")


rendering_list(JSON.parse(localStorage.getItem("Note")))


function clearing_Storage(){
    localStorage.clear()
}

deleting.addEventListener("click",clearing_Storage) 

function rendering_list(list){
    let HTML_text = ""
    for (i=0; i < list.length; i=i+1){
        HTML_text = HTML_text +
        `<li>
            <a href = ${list[i]}> ${list[i]}</a>
        </li>`
        ul_el.innerHTML = HTML_text

    }
}

saving.addEventListener("click",function(){
    HTML_text = ""
    lead_list.push(input_field.value)
    input_field.value=""
    localStorage.setItem("Note",JSON.stringify(lead_list))
    rendering_list(lead_list)
})

type here

I have tried moving the problematic code line around. It works, except for I would like to know the underlying issue here.

v1s10n_4
  • 598
  • 3
  • 18
Trung Lương
  • 1
  • 3
  • 1
    `getItem` will return undefined if its not been set (i.e first load), which JSON.parse won't parse, check console for errors – Lawrence Cherone Mar 29 '23 at 12:11
  • 2
    *"I have tried moving the problematic code line around."* - I would suggest that **this** is the underlying problem... Making random changes and hoping for the best. This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). Modern browsers have a variety of debugging tools available to you, and now is the time to start familiarizing yourself with them. – David Mar 29 '23 at 12:15
  • Hi, you should really try to isolate the issue. Does it work with `renderingList(['item1', 'item2'])`? Then `localStorage.getItem("Note")` is the broken puzzle piece and must be investigated (in the dev tools you can see your local storage. Does it still not work? Check the console for more details about the error. – NotX Mar 29 '23 at 12:15
  • `rendering_list(JSON.parse(localStorage.getItem("Note")))` this runs on load, calls your `rendering_list` function and sends undefined so you will get an error that `list.length` cannot read properties of null,(reading 'length'), becuz `list` was sent empty. Also your `clearing_Storage` function all it does is clear the storage but it won't clear the list built on the HTML, you need to clear that as well – Chris G Mar 29 '23 at 12:20
  • @LawrenceCherone Thank you for your response. I am aware that when we call the function on the first load, an error is returned because JSON.parse(localStorage.getItem("Note")) is empty at first. However, why does it work when the function call is placed at the bottom of the JS document (after the saving.addEventListener? – Trung Lương Mar 29 '23 at 21:45
  • @ChrisG Thank you for your response. I am aware that when we call the function on the first load, an error is returned because JSON.parse(localStorage.getItem("Note")) is empty at first. However, why does it work when the function call is placed at the bottom of the JS document (after the saving.addEventListener? – Trung Lương Mar 29 '23 at 21:46
  • I doubt it works, it throws the same error, unless you saved something in the localstorage and refreshed the page, without clearing the storage, then it will work becuz the storage won't clear on refresh, so there is data in there still – Chris G Mar 30 '23 at 12:02

0 Answers0