I am trying to learn HTML and Javascript to create a simple webpage hosted by an SD card on an arduino board/ethernet shield. Arduino is loading values into a XML file. I am trying to make it so that one of the values read from the XML file (nodeXaddress, X = number from 0 to 31) is displayed as the default value in the text box. I just cannot figure out how to copy the text from the XML files into the text input box.
I've tried using GetElementsByClassName, GetElementsByTagName, innerText, textContent. I've been doing this in baby steps and got the data from the XML file to display using Span. My end goal is to have the current address listed in the textbox, when the user clicks EDIT, the field becomes editable, after editing the new address is sent back to the arduino. The latter I have been able to accomplish with the enable/disable button.
<!DOCTYPE html>
<html>
<head>
<title>Wireless Node Status Page</title>
<script>
var strEnableButtonPressed = "";
var strDeleteButtonPressed = "";
var nodeEnableStatus = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
function GetNodeData() {
nocache = "&nocache=" + Math.random() * 1000000;
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {
if (this.responseXML != null) {
for (var i=0; i<nodeEnableStatus.length; i++) {
document.getElementById("node"+i+"address").innerHTML =
this.responseXML.getElementsByTagName('node'+i+'address')[0].childNodes[0].nodeValue;
document.getElementById("node"+i+"enabled").innerHTML =
this.responseXML.getElementsByTagName('node'+i+'enabled')[0].childNodes[0].nodeValue;
document.getElementById("node"+i+"online").innerHTML =
this.responseXML.getElementsByTagName('node'+i+'online')[0].childNodes[0].nodeValue;
document.getElementById("node"+i+"data").innerHTML =
this.responseXML.getElementsByTagName('node'+i+'data')[0].childNodes[0].nodeValue;
if (this.responseXML.getElementsByTagName('node'+i+'enabled')[0].childNodes[0].nodeValue === "ENABLED") {
document.getElementById("node"+i+"enabled").innerHTML = "ENABLED";
nodeEnableStatus[i] = 1;
}
else {
document.getElementById("node"+i+"enabled").innerHTML = "DISABLED";
nodeEnableStatus[i] = 0;
}
}
}
}
}
}
// send HTTP GET request with LEDs to switch on/off if any
request.open("GET", "ajax_inputs" + strEnableButtonPressed + strDeleteButtonPressed + nocache, true);
request.send(null);
setTimeout('GetNodeData()', 1000);
strEnableButtonPressed = "";
strDeleteButtonPressed = "";
}
function EnableButton(index) {
var n = index.toString();
if (nodeEnableStatus[index] === 1) {
nodeEnableStatus[index] = 0;
strEnableButtonPressed = "&NODE"+n+"ENABLED";
}
else {
nodeEnableStatus[index] = 1;
strEnableButtonPressed = "&NODE"+n+"ENABLED";
}
}
function DeleteButton(index) {
var n = index.toString();
if (nodeEnableStatus[index] === 1) {
nodeEnableStatus[index] = 0;
strDeleteButtonPressed = "&NODE"+n+"DELETE";
}
else {
nodeEnableStatus[index] = 1;
strDeleteButtonPressed = "&NODE"+n+"DELETE";
}
}
</script>
</head>
<body onload="GetNodeData()">
<h1>Wireless Node Status</h1>
<p>NODE INDEX : ADDRESS : ENABLED : ONLINE : NODE DATA</P>
<script>
var nodeEditActive = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
for (var i=0; i<32; i++) {
document.write('<p>NODE '+i+': <input type="text" name="node'+i+'Address" id="node'+i+'Address"> : <button type="button" disabled id="node'+i+'enabled" onclick="EnableButton('+i+')">DISABLED</button> : <span id="node'+i+'online">.......</span> : <span id="node'+i+'data">......</span> <button type="button" id="node'+i+'edit" onclick="EditButton('+i+')">EDIT</button> <button type="button" disabled id="node'+i+'delete" onclick="DeleteButton('+i+')">DELETE</button></p>');
var address = document.getElementsByTagName("node"+i+"address").innerHTML;
document.getElementById("node"+i+"Address").value = address;
}
function EditButton(index) {
if (nodeEditActive[index] === 1) {
nodeEditActive[index] = 0;
// document.getElementById("node"+index+"Address").readOnly = true;
document.getElementById("node"+index+"enabled").disabled = true;
document.getElementById("node"+index+"delete").disabled = true;
document.getElementById("node"+index+"edit").innerHTML = "EDIT";
}
else {
nodeEditActive[index] = 1;
// document.getElementById("node"+index+"Address").readOnly = false;
document.getElementById("node"+index+"enabled").disabled = false;
document.getElementById("node"+index+"delete").disabled = false;
document.getElementById("node"+index+"edit").innerHTML = "CANCEL";
}
}
</script>
</body>
</html>
Thank you for any help you can offer.
question from:
https://stackoverflow.com/questions/65838371/how-to-copy-innerhtml-text-to-input-text-box-value-property 
