Var null and not an object when using document.getElementById

Posted by Dean on Stack Overflow See other posts from Stack Overflow or by Dean
Published on 2010-04-11T22:24:23Z Indexed on 2010/04/11 22:33 UTC
Read the original article Hit count: 296

Filed under:
|
|

Hi,
I'm doing some work in HTML and JQuery. I have a problem of my textarea and submit button not appearing after the radio button is selected. My HTML looks like this:

<html>
 <head><title>Publications Database | Which spotlight for Publications</title>


<script type="text/javascript" src="./jquery.js"></script>
<script src="./addSpotlight.js" type="text/javascript" charset="utf-8"></script>


 </head>
 <body>
 <div class="wrapper">
        <div class="header">
    <div class="headerText">Which spotlight for Publications</div>
</div>
<div class="mainContent">
    <p>Please select the publication that you would like to make the spotlight of this month:</p>
    <form action="addSpotlight" method="POST" id="form" name="form">


            <div class="div29" id="div29"><input type="radio" value="29" name="publicationIDs" >A System For Dynamic Server Allocation in Application Server Clusters, IEEE International Symposium on Parallel and Distributed Processsing with Applications, 2008 </div> 

            <div class="div30" id="div30"><input type="radio" value="30" name="publicationIDs" >Analysing BitTorrent's Seeding Strategies, 7th IEEE/IFIP International Conference on Embedded and Ubiquitous Computing (EUC-09), 2009 </div> 

            <div class="div31" id="div31"><input type="radio" value="31" name="publicationIDs" >The Effect of Server Reallocation Time in Dynamic Resource Allocation, UK Performance Engineering Workshop 2009, 2009 </div> 

            <div class="div32" id="div32"><input type="radio" value="32" name="publicationIDs" >idk, hello, 1992 </div> 

            <div class="div33" id="div33"><input type="radio" value="33" name="publicationIDs" >sad, safg, 1992 </div> 

        <div class="abstractWriteup" id="abstractWriteup"><textarea name="abstract"></textarea>
            <input type="submit" value="Add Spotlight"></div>
    </form>

</div>
 </div>
 </body>
 </html>

My javascript looks like this:

$(document).ready( function() {
$('.abstractWriteup').hide();
addAbstract();
 });

 function addAbstract() {
var abstractWU = document.getElementById('.abstractWriteup');    

$("input[name='publicationIDs']").change(function() {          
    var abstractWU = document.getElementById('.abstractWriteup');    
    var classNameOfSelected =  $("input[name='publicationIDs']").val();

    var radioSelected = document.getElementById("div"+classNameOfSelected);       
    var parentDiv = radioSelected.parentNode;

    parentDiv.insertBefore(radioSelected, abstractWU.nextSibling);     
    $('.abstractWriteup').show();

 });};

I have developed this by using Node#insertBefore. When I have had it working it has been rearranging the radio buttons.
Thanks in Advance
Dean

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JavaScript