Var null and not an object when using document.getElementById
- by Dean
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
