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.