IF Returns True in Chrome, but False in Safari

My javascript function evaluates differently in Chrome/Firefox vs Safari/Opera. There are a number of answers (i.e. here) about my overall goal of show/hide. I'd rather not use jQuery for this case. Anyway, the main problem I want to address is that the conditionals are not returning the same across all browsers.

If I run my code in Chrome or Firefox, I get the alert: "Foo - New Function Ran." If I run the same code in Safari or Opera, I get the alert: "Foo - Else Function Ran."

I don't know why this is browser specific. I'm happy to go read some additional threads or docs if this is addressed elsewhere, but I can't seem to figure it out.

function bar(){
        var addGiftVal = document.forms["subscribe"]["addGift"].value;

        if (addGiftVal == "yes"){
                document.getElementById("showHideGiftShipping").style.display='block';  
                alert("Bar - Yes Function Ran.");
        }
        
        else {
                document.getElementById("showHideGiftShipping").style.display='none';   
                alert("Bar - Else Function Ran.");
        }

}

function foo(){
        var subTypeVal = document.forms["subscribe"]["sub_type"].value;
        var subShipVal = document.forms["subscribe"]["ship_address_check"].value;

        if (subTypeVal == "renewal"){
                document.getElementById("showHideSubID").style.display='block'; 
                document.getElementById("showHideGiftShipping").style.display='none';   
                document.getElementById("showHideShippingChoices").style.display='block';
                document.getElementById("presentBox").style.display='block';    
                        if (subShipVal == "different"){
                        document.getElementById("showHideStandardShipping").style.display='block';
                        }
                        else {
                        document.getElementById("showHideStandardShipping").style.display='none';
                        }
                alert("Foo - Renewal Function Ran.");
                }
        
        else if (subTypeVal == "new"){
                document.getElementById("showHideSubID").style.display='none';  
                document.getElementById("showHideGiftShipping").style.display='none';
                document.getElementById("showHideShippingChoices").style.display='block';
                document.getElementById("presentBox").style.display='block';    
                        if (subShipVal == "different"){
                        document.getElementById("showHideStandardShipping").style.display='block';
                        }
                        else {
                        document.getElementById("showHideStandardShipping").style.display='none';
                        }
                alert("Foo - New Function Ran.");
                }
        
        else {
                document.getElementById("showHideSubID").style.display='none';  
                document.getElementById("showHideGiftShipping").style.display='block';  
                document.getElementById("showHideShippingChoices").style.display='none';
                document.getElementById("showHideStandardShipping").style.display='none';
                document.getElementById("presentBox").style.display='none';     
                alert("Foo - Else Function Ran.");
                }
                
}

</script>

<input type="radio" name="sub_type" value="new" id="subf_new" checked="checked" onclick="foo();"><label for="subf_new">New</label>  
<input type="radio" name="sub_type" value="renewal" id="subf_renewal" onclick="foo();"><label for="subf_renewal">Renewal</label>   
<input type="radio" name="sub_type" value="gift" id="subf_gift" onclick="foo();"> <label for="subf_gift">Gift</label>