CODEWITHSUNDEEP
javascripthtml
jordaniac89
jordaniac89

Reputation: 574

innerHTML not writing to page

I have a javascript function that takes an xml string that is returned by a JSP and parses it and is supposed to write it to the page. The code is: 

 function renderResults() {
 alert("renderResults()");
 element = document.getElementById("results").innerHTML;
 var xmlString = '<%=session.getAttribute("directoryInfo")%>';

 if (window.DOMParser) {
     parser = new DOMParser();
     xmlDoc = parser.parseFromString(xmlString, "text/xml");
 } else {
     xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
     xmlDoc.async = false;
     xmlDoc.loadXML(xmlString);
 }
 var x = xmlDoc.getElementsByTagName("person");
 for (var i = 0; i < x.length; i++) {
     console.log(x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue);
     console.log(x[i].getElementsByTagName("lastname")[0].childNodes[0].nodeValue);
     element += '<p>' + x[i].getElementsByTagName("firstname")[0].childNodes[0].nodeValue +
         " " + x[i].getElementsByTagName("lastname")[0].childNodes[0].nodeValue + '</p>';
     console.log(element);
 }
}

For some reason, it won't write. The renderResults() function is called after the form is submitted:

var formData = {
    "field1": field1,
    "oper1": oper1,
    "value1": value1,
    "field2": field2,
    "oper2": oper2,
    "value2": value2,
    "field3": field3,
    "oper3": oper3,
    "value3": value3
};
jQuery.post("<%=request.getRequestURL().toString()%>getInfo.jsp", formData, function(response) {
    alertHere(response)
});

renderResults();

I do know that the renderResults function works, because all of my console.logs are outputting the correct info.

Console.log(element) at the end outputs the correct html that should be written to the page.

Any suggestions? I'm relatively new to javascript, so I'm trying to figure out exactly how and when things are rendered.

I'm not sure if that has anything to do with my problem or not.

Upvotes: 0

Views: 105

Answers (1)

Quentin
Quentin

Reputation: 943645

element = document.getElementById("results").innerHTML; copies the string from innerHTML to element.

It does not create a reference.

Updating the value of element will not update the value of innerHTML

To do that you must assign a new value back to innerHTML.

Upvotes: 3

Related Questions