Member Avatar for Towlie

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.

  • 3 Contributors
  • 2 Replies
  • 243 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Taywin
Member Avatar for fxm

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

Member Avatar for Taywin

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.