Having issues with hiding and showing divs on an onchange - php

Question

I am having issues firing off an on-change in the department drop-down field not sure if i wrote it correctly. The error is Uncaught TypeError: Cannot read property 'style' of null. I am trying to select a department like claims then it will fire off an onchange to show another drop-down called workrequested. I have not filled all the departments yet but that should not mater if i want to test it on couple departments first. I think it has to do with 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

As far as I can see you want to get divPassport1 (divPassport1) and divPassport2 and not dvPassport1 and dvPassport2.
Change var dvPassport1 = document.getElementById("dvPassport1"); to var dvPassport1 = document.getElementById("divPassport1"); and second one respectively or correct the ids.
EDIT
I guess you are accessing elements too early and you DOM is not loaded yet. Move your js code to the end of page before closing body and wrap it following way to wait for window onload event:
<script>
(function() {
// your javascript code here
// the DOM will be available here
})();
</script>