Getting error TypeError: document.getElementById(...) is null as function is called for the second time - typeerror

Question

I am using this code
<script type="text/javascript">
function loadXMLDoc()
{
var testValue = document.getElementById("test").value;
document.getElementById("test").value = ++testValue;
var testValue2 = document.getElementById("test").value;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("3");
document.getElementById("loading").style.display = "none";
alert("4");
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
alert("1");
document.getElementById("loading").style.display = "block";
alert("2");
xmlhttp.open("GET","catalog/view/theme/default/template/information/latest_newsroom.php?q="+testValue2,true);
xmlhttp.send();
}
</script>
<form name="testForm" method="post" action="">
<input type="text" name="test" id="test" value="1" />
<input type="button" name="testButton" value="More" onclick="loadXMLDoc()" />
</form>
and it gives the error :
TypeError: document.getElementById(...) is null
as my function runs for the second time.

Answer 1

The error is corect.
You have set var testValue = document.getElementById("test").value;
so this document.getElementById("test").value = ++testValue;
should be testValue.value = ++testValue; since testValue is now a variable.
Below is what i have sugested in the comment:
<script type="text/javascript">
function loadXMLDoc()
{
var testValue = document.getElementById("test").value;
document.getElementById("test").value = ++testValue;
var testValue2 = document.getElementById("test").value;
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("3");
document.getElementById("loading").style.display = "none";
alert("4");
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
else
{
document.getElementById("loading").style.display = "block";
}
}
alert("1");
alert("2");
xmlhttp.open("GET","catalog/view/theme/default/template/information/latest_newsroom.php?q="+testValue2,true);
xmlhttp.send();
}
</script>
<form name="testForm" method="post" action="">
<input type="text" name="test" id="test" value="1" />
<input type="button" name="testButton" value="More" onclick="loadXMLDoc()" />
</form>