CODEWITHSUNDEEP
javascriptjquerydom
Dean
Dean

Reputation: 8998

Var null and not an object when using document.getElementById

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

Upvotes: 1

Views: 2066

Answers (2)

Dean
Dean

Reputation: 8998

I have rewritten it to a shorter version with jQuery: 

function addAbstract() {
  $("input[name='publicationIDs']").change(function() {
    var abstractWU = document.getElementById('abstractWriteup');
    var selected =    $("input[name='publicationIDs']:checked").val();
    var radioSelected = document.getElementById("div"+selected);

    $("#abstractWriteup").insertAfter(radioSelected);

    $(abstractWU).show();

  });
};

Upvotes: 0

Jacob Relkin
Jacob Relkin

Reputation: 163288

It appears that you have a . in your getElementById parameter.

getElementById does not handle classes.

You should not have ids that share the same name as a class. And vice versa.

id's are meant to be unique.

This should work, but I implore you to re-think your naming scheme here.

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

    var radioSelected = document.getElementById( "div"+ $( this ).attr( 'id' ) );       
    var parentDiv = radioSelected.parentNode;

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

 });};

Upvotes: 5

Related Questions