Variable becomes undefined when trying to use innerHTML

Hi all,

I was wondering if you could help, this one’s stumping me!

I have an AJAX call which returns JavaScript from a PHP file.

The PHP (simplified than what my actual PHP looks like, but this produces the same error):

[code]
$output = “newCounter = ‘JERK’;”;
echo $output;
[/code]

The JavaScript (I’ve highlighted the lines in question in bold/red. If you see any variables referenced that haven’t been declared, they are declared in the PHP but I’ve simplified the PHP for easy reading.):

[code]
function activateICDForm() {
var icdForm = document.getElementById(‘icdForm’);

icdForm.addEventListener(‘submit’, function(event) {
event.preventDefault();

/* Give current visible reportICD_wrapper a unique class. Allows AJAX call
to close current reportICD_wrapper only, rather than whichever instance of
#reportICD_wrapper is visible when the timer runs out. */
var randomNumber = Math.random();
document.getElementById(‘reportICD_wrapper’).setAttribute(‘class’, randomNumber);

var icdValue1 = icdForm.queryType.value;
var icdValue2 = icdForm.queryColumn.value;
var icdValue3 = icdForm.queryID.value;
var successOutputTarget = failureOutputTarget = document.getElementById(‘icdForm’);

// AJAX call with several parameters

ajax(‘POST’,
‘../model/invalid_contact_details.php’,
‘JavaScript’,
successOutputTarget,
function success(x, response) {
eval(response);
if (typeof icdResponseType !== ‘undefined’) {
successOutputTarget.innerHTML = icdResponseText;
var icdImage = document.getElementById(‘successImage’);

if (icdImage) {
icdImage.setAttribute(‘src’, ‘../images/animated_tick.gif’);
}

if (icdResponseType == ‘success’) {
setTimeout(function() {
$(document).ready(function($) {
$(‘[class=”‘+randomNumber+'”]’).hide(“slide”, {direction: “right”}, 500, function() {
closeReportICD();
});
});
}, 2500);
// update hit counter
setTimeout(function() {
if (typeof newCounter !== ‘undefined’) {
[B]alert(‘newCounter: ‘ + newCounter);
theID.parentNode.innerHTML = [COLOR=”#FF0000″]newCounter[/COLOR];[/B]
document.getElementById(newID).style.display = ‘none’;
$(document).ready(function($) {
$(‘#’ + newID).fadeIn(3000);
});
}
}, 3000);
} else {
successOutputTarget.setAttribute(‘class’, ‘yellow’);
setTimeout(function() {
$(‘[class=”‘+randomNumber+'”]’).hide(“slide”, {direction: “right”}, 500, function() {
closeReportICD();
});
}, 12500);
}
} else {
successOutputTarget.setAttribute(‘class’, ‘yellow’);
successOutputTarget.innerHTML = ‘[ICD-UO] Unexpected output. Report this bug.’;
}
},
failureOutputTarget,
function failure(x, response) {

},
‘queryType=’ + icdValue1 + ‘&queryColumn=’ + icdValue2 + ‘&queryID=’ + icdValue3);
});
}
[/code]

OK so the first line in bold shows the alert, where newCounter produces JERK as intended.

But the very next line, newCounter is suddenly undefined:

Uncaught TypeError: Cannot set property ‘innerHTML’ of undefined

Therefore the HTML of the parent of theID isn’t changed to JERK

Any ideas why the newCounter variable is suddenly undefined??

Also in #JavaScript _↴