在隐藏和显示div上显示div时出现问题

Question

我遇到的问题是在部门下拉字段中触发更改，不知道我是否正确写入。错误未捕获TypeError：无法读取null的属性'样式'。我试图选择一个像索赔一样的部门，然后它会发射一个onchange以显示另一个名为workrequested的下拉菜单。我还没有填补所有的部门，但如果我想首先在几个部门进行测试，这不应该成为问题。我认为这与dvPassport1.style.display

做

<script> 
    function ShowHideDiv1() { 
     var Department = document.getElementById("Department"); 
     var divPassport1 = document.getElementById("divPassport1"); 
     divPassport1.style.display = Department.value == "Claims" || Department.value == "Flat 1"|| Department.value == "Flat 2"|| Department.value == "Hanging Bulk" || Department.value == "Hanging Store North" || Department.value == "Hanging Store South" || Department.value == "Inventory Integrity" || Department.value == "Rack Shoes" || Department.value == "Fine Jewelry"? "block" : "none"; 
    } 
    function ShowHideDiv2() { 
     var Department = document.getElementById("Department"); 
     var divPassport2 = document.getElementById("divPassport2"); 
     divPassport2.style.display = Department.value == "JackPotLane" ? "block" : "none"; 
    } 

    </script> 
<?=form_open('insert/create/', array(
'class' => 'form-horizontal', 
'role' => 'form', 

)); ?> 
<div class="row"> 
<div class="container"> 
<h3>Validation Form</h3> 

<br> 
    <div class="col-sm-6"> 


    <div class="form-group"> 
    <?php echo form_label('ZID', 'ZID', $attributes=array());?> 
    <?php echo form_input('ZID', set_value('ZID'), $attributes=array("class" => "form-control", "id"=>"ZID"));?> 
    <!--show error message --> 
     <div class="error"><?php echo form_error('ZID'); ?></div> 
    </div> 



    <div class="form-group"> 
    <?php echo form_label('Employee Name', 'EmpName', $attributes=array());?> 
    <?php echo form_input('EmpName', set_value('EmpName'), $attributes=array("class" => "form-control", "id"=>"EmpName"));?> 
     <!--show error message --> 
    <div class="error"><?php echo form_error('EmpName'); ?></div> 
    </div> 





    <div class="form-group"> 
    <?php echo form_label('Department', 'Department', $attributes=array());?> 
    <?php 
    $options = array(
     ""=>"Choose Department", 
     "Claims" => "Claims", 
     "Flat 1"=>"Flat 1"); 
    ?> 
    <?php echo form_dropdown('Department', $options,set_value('Department'),array("class" => "form-control", "id"=>"Department", "onchange" => "ShowHideDiv1();ShowHideDiv2();"));?> 

    <!--show error message --> 
    <div class="error"><?php echo form_error('Department'); ?></div> 
    </div> 




    <div class="form-group" id="divpassport1" style="display: none" > 
    <?php echo form_label('WorkRequested', 'WorkRequested', $attributes=array());?> 
    <?php 
    $options = array(
     ""=>"Choose WorkRequested", 
     "Cases Not Received" => "Cases Not Received", 
     "Master Pack"=>"Master Pack"); 
    ?> 
    <?php echo form_dropdown('WorkRequested', $options,set_value('WorkRequested'),array("class" => "form-control", "id"=>"WorkRequested"));?> 
     <!--show error message --> 
    <div class="error"><?php echo form_error('WorkRequested'); ?></div> 
    </div> 

    <div class="form-group" id="divpassport2" style="display: none" "> 
    <?php echo form_label('WorkRequested', 'WorkRequested', $attributes=array());?> 
    <?php 
    $options = array(
     ""=>"Choose jackpot WorkRequested", 
     "FYI" => "FYI", 
     "Request"=>"Request"); 
    ?> 
    <?php echo form_dropdown('WorkRequested', $options,set_value('WorkRequested'),array("class" => "form-control", "id"=>"WorkRequested"));?> 
     <!--show error message --> 
    <div class="error"><?php echo form_error('WorkRequested'); ?></div> 
    </div> 




<div class="form-group"> 
    <?php echo form_label('Description','ReqDescription', $attributes=array());?> 
<?php echo form_textarea('ReqDescription',set_value('ReqDescription'),array("class"=>"form-control textarea","id"=>"ReqDescription"));?> 
    <!--show error ReqDescription --> 
<div class="error"><?php echo form_error('ReqDescription'); ?></div> 
</div> 
<input type="hidden" name="DATEREQUESTED" value="<?php echo date("Y/m/d h:i:sa");?>" value="<?=set_value('DATEREQUESTED')?> " value="<?=set_value('DATEREQUESTED')?>"> 


<input type="hidden" class="form-control" id="Status" name="Status" value="Received" placeholder="Status" value="<?=set_value('Status')?>"> 
<div class="form-group"> 
<?php echo form_submit('submit', 'Submit', array("class"=>"btn-primary btn", "id"=>"submit"));?> 
</div> 


    <?php echo form_close()?> 

Answer 1

至于我可以看到，你想要得到divPassport1（d 我 vPassport1）和divPassport2，而不是dvPassport1和dvPassport2。

更改var dvPassport1 = document.getElementById("dvPassport1");到var dvPassport1 = document.getElementById("divPassport1");和第二个分别或更正ID。

编辑 我想你访问元素太早，你的DOM尚未加载。将您的js代码页结束时关闭body之前，将其套以下的方式来等待窗口onload事件：

<script> 
(function() { 
    // your javascript code here 
    // the DOM will be available here 
})(); 
</script>