0

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
3
Views
7 Years
Discussion Span
Last Post by Taywin
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.