使用document.getElementById时,Var为null,而不是对象

Dea*_*ean 1 javascript jquery dom

我正在做一些HTML和JQuery的工作.我有一个问题,我的textarea和选择单选按钮后没有出现提交按钮.我的HTML看起来像这样:

<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>
Run Code Online (Sandbox Code Playgroud)

我的javascript看起来像这样:

$(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();

 });};
Run Code Online (Sandbox Code Playgroud)

我通过使用Node#insertBefore开发了这个.当我使用它时,它已经重新安排了单选按钮.
先谢谢
Dean

Jac*_*kin 5

看来.你的getElementById参数中有一个.

getElementById 不处理类.

你应该具有id共享相同的名称作为S级.反之亦然.

id这是独一无二的.

这应该有效,但我恳请你在这里重新考虑你的命名方案.

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();

 });};
Run Code Online (Sandbox Code Playgroud)