Null value from getElementById

[createErrorMsg]

Hello, everyone. I've been out of the web design game for a number of years (jumped ship for a "real job"), and thus not on the WebmasterWorld boards. It's nice to be back. I'm working on a project and trying to blow the dust off my old programming skills.

I'm having trouble with a script. The page it's on contains a number of multiple choice questions where the user selects one of four radio buttons for each group. When the user clicks the submit button, it calls a function checkAnswers() which attempts to loop through the input fields on the page. It checks for a hidden input that indicates the presence of a multiple choice question, then pulls two pieces of information.

The first is the value of the radio button selected by the user. No problem there.

The second is supposed to be the value of a hidden input that contains the number of the correct answer. It then compares the two and delivers the student's results.

The problem happens when the script attempts to pull the value from the hidden input with the correct answer. For each question, this input has an ID that reads "correct" plus the number of the question. So access it, the function calls

var correctAnswer = document.getElementById(correct).value;

The correct referenced in the getElementById() is a variable consisting of the word "correct" plus a number from a variable fed to the function, which are eval()ed together in the line before:

var correct = eval("'correct" + questionNumber + "'");

If I put an alert(correct) in after this line, it reads off exactly the value I'm looking for, but when it passes that value into the getElementById(), it crashes the script and sends an error message to the JS Console:

Timestamp: 5/19/2012 10:31:11 AM
Error: document.getElementById(questionNumber) is null
Source File: http://example.com/wp-content/themes/theme/includes/results.js
Line: 14

The odd thing is, the script runs like a dream on my local machine, but hawks up the error message on the live site. Both are using an identical Wordpress install: same theme, same plugins.

I'm completely at a loss. The function code is below. checkAnswers() is called by the submit button, and in turn calls on getRadioValue() and checkAnswer().

If you can share any insight on why I'm getting this error message, I would greatly appreciate it.

Best,
cEM

function getRadioValue(theRadioGroup){
 for (var i = 0; i < document.getElementsByName(theRadioGroup).length; i++){
 if (document.getElementsByName(theRadioGroup)[i].checked){
 var chosenAnswer = document.getElementsByName(theRadioGroup)[i].value; //get the student's response value
var slimChosenAnswer = chosenAnswer.substr(0,1); //trim it down to just the first letter
if (slimChosenAnswer == "A") { convertdChosenAnswer = "1" } else if (slimChosenAnswer == "B") { convertdChosenAnswer = "2" } else if (slimChosenAnswer == "C") { convertdChosenAnswer = "3" } else if (slimChosenAnswer == "D") { convertdChosenAnswer = "4" } //convert the letter response into a number.
return convertdChosenAnswer;//return the student's response as a number
 }
 }
}

function checkAnswer(questionNumber,convertdChosenAnswer) {
var correct = eval("'correct" + questionNumber + "'");//Get the correct answer using the questionNumber variable.
var correctAnswer = document.getElementById(correct).value; //pull the correct answer value from the hidden input for this question
if (convertdChosenAnswer == correctAnswer) {//Compare the checked value against the correct answer, 
str = "<span class='yes'>&#10004;</span>"; // insert the 'Heavy Checkmark'
} else {
str = "<span class='no'>&#10008;</span>";//else insert 'Heavy Ballot X'.
}
return str;
}



function collectResults() {
var str = "<p class='aligncenter'><button onclick='collectResults()' class='a_button'>Update</button></p>";//change the button to "update"
str += '<p>Your answers were:</p>';
var elem = document.getElementById('the_questions').elements;
for(var i = 0; i < elem.length; i++) { //loop the inputs
if(elem[i].type == 'hidden' && elem[i].name == 'the_number'){ //if it's the question number input, then
var questionNumber = elem[i].value; //get the question number
var theRadioGroup = eval("'group" + questionNumber + "'"); //guide the script to the right radio group
var convertdChosenAnswer = getRadioValue(theRadioGroup);//get the student's response from the radio group
var checkt = checkAnswer(questionNumber,convertdChosenAnswer); //check the student's answer against the correct answer
str += "<p class='answer_item'>" + checkt + "<b>" + elem[i].value + ".</b>&nbsp&nbsp"; //insert the check or ex
} else if (elem[i].type == 'textarea') {
str += elem[i].value +"</p>";
} else if (elem[i].type == 'radio') {
if (elem[i].checked == true) {
str += elem[i].value + "</p>";
}
}
} 
str += "<p class='aligncenter'><button onClick='printSpecial();return false;' class='a_button'>Print Your Answers</button></p>";
document.getElementById('the_results').innerHTML = str; //dump the code into the results div.
}

[Fotiman]

No need for an eval here. Try this instead:
var correct = 'correct' + questionNumber;

[Fotiman]

*duplicate post*

[createErrorMsg]

Thanks, Fotimon. I added that in when the other way didn't work, just on the off chance that it needed the eval. I think I figured out my problem. The loop was finding the question number hidden input on questions that have a textarea for typing a short answer, vs a multiple choice question. Since these have no "correct" answer value, the call to getElementById(correct) came back null.

I rewrote the PHP to output a second hidden input containing the type of question, then rewrote the loop to check for that value before trying to compare answers. Everything seems to be working just how I wanted it now.

I appreciate your taking the time to respond to my post. I'll take out the unnecessary eval per your advice.

Thanks,
cEM