"Cannot read property 'xxxx' of null."

I’m getting the error in a test page. “Cannot read property ‘setupSOneSummary’ of null.” This error usually means something does not exist yet. The error is on this external JS page (complete code shown - not much 'cuz it’s only a test):

var form1a = document.getElementById('form1a'),
    setupSOneSummary = document.getElementById('form1a.setupSOneSummary');

function exportForm1b() {
    form1a.setupSOneSummary.value = ""; // clear the field if necessary
/* error inserted here in Google Chrome Tools */
    var SOneDateFrom = localStorage.getItem('SOneDateFrom'); // put value into variable
    form1a.setupSOneSummary.value += "---EVENT---"; // add heading to summary textarea
    form1a.setupSOneSummary.value += "\
 Date From: " + JSON.parse(SOneDateFrom);
}

The form on the page is form1a, and the textarea field on the page is ‘setupSOneSummary’', so I don’t understand how it could not exist.

Are you sure it exists at the time the code is running? Normally you would place the javascript code in a callback triggered once the dom is ready:


window.onload = function(){
    // Your code here
};

I had put it in the <body onload=“exportForm1b();”>

I also made it a button: <a href=“#” data-role=“button” onclick=“exportForm1b()”>prepare to export</a>

I tried putting the script at the bottom of the page; still no go.

The previous page accepted the input and stored it in localstorage. Why can’t I get it out of localStorage and into this field on this second page?