SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with document.getElementById returning null.

    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 + ". \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>

    Any help is greatly appreciated.

    Kind regards,
    Towlie.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Code:
    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);)
    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.

  3. #3
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •