Hi guys,
Any help with the following will be greatly appreciated.
I get this error :"document.getElementById("buttons" + questionNum) is null" with the following 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 + ". \n");
      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>

Kind regards,
Towlie.

Recommended Answers

All 2 Replies

Line 56 is trying to use the id before it is set at line 59.

I think line 42 should change from

myButton.onclick = addRadio;

to

myButton.onclick = addRadio(questionNum);

And then, you should change your function addRadio to take a question number argument.

The reason is that your questionNum variable is a global. After you add a button, the variable value is increased. As a result, there is no button with the questionNum you are looking for. Passing question number argument to your addRadio would ensure that the question number you are looking for already exists.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.