document.geElementById().value or innerHTML gives csl_functions.js:310 Uncaught TypeError: Cannot read properties of null (reading ‘innerHTML’) [duplicate]

I’m attempting to capture dynamically updated variables when a note is loaded so that I can then save the updated note. When the note is loaded I can see the variable content in the page itself, and in the page inspect elements section.

The elements section shows the variables are loading correctly.

<span id="NoteStudySetID" class="NoteStudySetID" type="text" value="tmpvar">1</span>
<span id="NoteRecordID" class="NoteRecordID" type="text" value="tmpvar">1</span>
<div id="NoteNewName" class="NoteNewName">Abomination of Desolation</div>

When I attempt to access those same elements to save the note, I get a null response. I’m using an XMLHttpRequest and php in the background. To load the note: (this appears to work)

function loadNote(id) {
    const xhttp = new XMLHttpRequest();
    var params = "id="+arguments[0];
    var url = 'loadNote.php';
    xhttp.open("GET", url+"?"+params);
    xhttp.send();
    xhttp.onreadystatechange = (e) => {
        if (xhttp.readyState === XMLHttpRequest.DONE) {
            const status = xhttp.status;
            if (status === 0 || (status >= 200 && status < 400)) {
                //this will pull the array sent by php in json format 
                //console.log(xhttp.responseText);
                var myObj = JSON.parse(xhttp.responseText); 

                document.getElementById('NoteStudySetID').innerHTML = myObj[0];
                document.getElementById('NoteStudySet').innerHTML = myObj[1]; 
                document.getElementById('NoteRecordID').innerHTML = myObj[2];
                document.getElementById('NoteInputName').value = myObj[3];
                let name = myObj[3];
                console.log(name);
                document.getElementById('NoteNewName').innerHTML = name;
                document.getElementById('richTextField').innerHTML = myObj[4];

                console.log(document.getElementById('NoteNewName').innerHTML);
            }   
        }
    }                         
}  `

The console.log() shows the the elements getting the proper and expected input.
The save function is not fully complete because I can’t yet access the document.getElementById() variables. The save code follows: (not going so well…)

function saveNote(){
    const xhttp = new XMLHttpRequest();
    var rte = document.getElementById('richTextField').innerHTML;  //this actually works
    document.write("RTE Content: "+rte+"<br /><br />");
    let inputField = document.getElementById('NoteNewName');
    let value = inputField.innerHTML;                         // this is what trips the error
    //var name = document.getElementById('NoteInputName').value;
    document.write("Note Name: "+value+"<br /><br />");
    var noteID = document.getElementById('NoteRecordID').innerHTML;  // this will error to
    document.write("Note ID: "+noteID+"<br /><br />");
}

The error I get is this:
Uncaught TypeError: Cannot read properties of null (reading ‘innerHTML’)

I don’t understand why I cannot access what appears to be good code. Thanks in advance for anyone who can help.

I’ve attempted to access all error throwing elements with:
document.getElementByID();
document.getElementByID().value;
document.getElementByID().innerHTML;
document.getElementByID().textContent;

Apparently I’ve reached the end of my competency here.