Division won't stay hidden after returning to page javascript

Question

I'm having problem with keeping division persistently hidden. My javascript function is working, it changes division style display, but after I save changes and later return on page, division is visible even if I chose option in select which should keep division hidden

Here is my HTML code:

<select name="cancelation" class="dropdown" id="dropdownRefundOption">
    <option value="refundable">Refundable</option>
    <option value="non-refundable">Non-Refundable</option>
</select>
<div class="row cancelationDaysRow" id="divisionRefundOption"> <span class="no-margin-left">Up to</span>
    <div class="input-holder">
        <input name="cancelationDays" id="cancelation" title="<?php echo $this->__('Cancelation days') ?>" placeholder="<?php echo $this->__('30') ?>" value="30" class="input-text input-text_inner" type="text" onkeyup="this.value=this.value.replace(/[^\d]/,'')" maxlength="3" />
    </div> <span>days before the starting date of this tour</span>
</div>

Here is my JS script:

<script type = "text/javascript" >

var dropdownRefOpt = document.getElementById("dropdownRefundOption");
var divRefOpt = document.getElementById("divisionRefundOption");

dropdownRefOpt.onchange = function () {
    if (dropdownRefOpt.value == "non-refundable") divRefOpt.style.display = 'none';
    else divRefOpt.style.display = 'block';
};

</script>

Answer 1

So either the serverside needs to set up the correct state when the page loads, you you need to trigger code that sets the elements state when the page is running.

So either trigger the onchange event after you set it.

dropdownRefOpt.onchange = function(){ /* your code here */ };
dropdownRefOpt.onchange();

or move the code to a method and call it.

function yourCode () { /* your code here */ }
dropdownRefOpt.onchange = yourCode;
yourCode();