All content on page doesn't come up on first load, need to refresh and then it works

Question

Technically there's no error, although when accessing a web page you don't want to have to refresh in order for things to load up, so the code is not running as efficiently and smoothly as possible.

The error that shows up in the console log is as follows:

jquery.min.js:2 Uncaught TypeError: Cannot read property 'length' of null
    at HTMLDocument.<anonymous> (subject-page.html?subjectID=2:375)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)

When I click the refresh browser button, this error goes away and everything works fine. So I think it has to do with loading the page or calling certain functions at different times, although I'm not too sure and would appreciate any help.

Here's the JavaScript that determines some of the pages content

 $(document).ready(function() { if (getParameterByName('subjectID') > 0) { localStorage.setItem("myFutureCurrentSubjectID", getParameterByName('subjectID')); getSubject(); getTopicsForSubject(); var topicsString = JSON.parse(localStorage.getItem('myFutureTopicsForSubject')); } else { getSubject(); getTopicsForSubject(); var topicsString = JSON.parse(localStorage.getItem('myFutureTopicsForSubject')); } var userName = localStorage.getItem('myFutureUserName'); document.getElementById('tabtitle').innerHTML = userName + "'s Future - " + localStorage.getItem('myFutureCurrentSubject'); document.getElementById('subjectTitle').innerHTML = localStorage.getItem('myFutureCurrentSubject'); document.getElementById('menuSubjectName').innerHTML = localStorage.getItem('myFutureCurrentSubject'); localStorage.removeItem('myFutureCurrentTopic'); if (topicsString.length - 1 >= 1) { document.getElementById('topicCard1Title').innerHTML = topicsString[0]; } if (topicsString.length - 1 >= 2) { document.getElementById('topicCard2Title').innerHTML = topicsString[1]; } if (topicsString.length - 1 >= 3) { document.getElementById('topicCard3Title').innerHTML = topicsString[2]; } if (topicsString.length - 1 >= 4) { document.getElementById('topicCard4Title').innerHTML = topicsString[3]; } if (topicsString.length - 1 >= 5) { document.getElementById('topicCard5Title').innerHTML = topicsString[4]; } if (topicsString.length - 1 >= 6) { document.getElementById('topicCard6Title').innerHTML = topicsString[5]; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

This simply indicates that for the key myFutureTopicsForSubject , the particular value doesn't exist in localStorage the first time when you load the page so accessing it returns null which makes your topicsString set to null .

Although on each subsequent load you must not be getting null even after you close the tab or browser since localStorage has a broader scope for saving that value. You are either doing it explicitly and removing the key from the localStorage using developer console or some part of your code not shared here is doing it conditionally.