Problem with document.getElementById returning null

JavaScript
1

Hey guys,
I am getting the following error:document.getElementById(“buttons” + questionNum) is null. With the below code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml” >

<head runat=“server”>

<title>Untitled Page</title>

<script type=“text/javascript”>
var questionNum = 1;

 function addQuestion()
 {

  var paragraph = document.createElement("p");
  document.getElementById("divRadiolist").appendChild(paragraph);


  var newQuestion = document.createTextNode(questionNum + ". \

");
document.getElementById(“divRadiolist”).appendChild(newQuestion);

  document.getElementById("divRadiolist").appendChild(paragraph);


  var myText = document.createElement("input");
  myText.id = "text" + questionNum;
  myText.setAttribute("type", "text");
  myText.setAttribute("name", "question");
  myText.style.width = "1000px";
  myText.style.height = "50px";
  document.getElementById("divRadiolist").appendChild(myText);


  var paragraph = document.createElement("p");
  document.getElementById("divRadiolist").appendChild(paragraph);

  var myButton = document.createElement("input");
  myButton.id = "buttons"+ questionNum;
  myButton.setAttribute("type", "button")
  myButton.setAttribute("name", "questionButton");
  myButton.onclick = addRadio;
  myButton.value = "Create answer options";
  document.getElementById("divRadiolist").appendChild(myButton);

  var paragraph = document.createElement("p");
  document.getElementById("divRadiolist").appendChild(paragraph);
  var i = 0;

  function addRadio()
   {
     var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
     var nextChar = str.charAt(i);

     var option = document.createTextNode(nextChar);
     document.getElementById("buttons" + questionNum).appendChild(option);

     var myRadio = document.createElement("input");
     myRadio.id = "buttons" + questionNum;
     myRadio.setAttribute("type", "radio");
	 myRadio.setAttribute("name", "radio");
	 myRadio.value = "myvalue";

     document.getElementById("buttons" + questionNum).appendChild(myRadio);

     i++;
   }

  questionNum++;
}

</script>

</head>

<body>

<form id=“form1” action=“profilepage.php” method=“post”>

<input type=“button” id=“btnAddQuestion” value=“Create Question” onclick=“addQuestion()” />
<div id=“divRadiolist”></div>
<p><input type=“submit” name=“submitted” value=“Save Test” /></p>

</form>

</body>

</html>

Any help is greatly appreciated.

Kind regards,
Towlie.

2

The problem is that your addRadio button is requiring the questionNum value to exist. The problem is that this does not exist when the function runs, because it is defined within the addQuestion function. addQuestion is over and done with when you press the “Create Question” button. Even defining addRadio inside addQuestion won’t solve this problem. It’s all about when the function runs.

The simple solution would be to declare questionNum outside the function (and make it a global variable). Then you can do questionNum++ and it will be maintained.

3 
var myButton = document.createElement("input");
myButton.id = "buttons"+ questionNum;
...
document.getElementById("divRadiolist").appendChild(myButton);

Do you have firebug or some similar debugger with breakpoint setters? You need to see if this is really getting added. It either isn’t getting added, or its id is coming out differently than your script expects.

My newb opinion is that this whole script is in serious need of a for loop who calls functions that add buttons. And, since you set a var called “paragraph” multiple times, and append it to a div you’re searching for multiple times (document.getElementById(“divRadiolist”).appendChild(paragraph):wink:
I’d save the browser some work and make a var than equals div id=“divRadiolist”. You can reuse it multiple times instead of using getElementById every time.