mix of getElementId and input[name=...] causes error on membership contribution page with autorenew set to automatic

The error is:

TypeError: document.getElementById(...) is null

And the culprit seems to be in this block:

else if ($('input[name="auto_renew"]').length !== 0) {
    if ($('input[name="auto_renew"]').prop('checked')) {
       isRecur = true;
     }             
     else if (document.getElementById('auto_renew').type == 'hidden') {
       isRecur = (document.getElementById('auto_renew').value == 1);
     }                                                                                                      
     else {                   
       isRecur = Boolean(document.getElementById('auto_renew').checked);
     }
}    

Specifically this line: else if (document.getElementById('auto_renew').type == 'hidden') {

The page in question does not have any elements with id=auto_renew but does have ones with input[name="auto_renew"] (and it's a hidden field) so the first if condition fails (not a checkbox) and the second condition throws the error.

I think the answer is to use input[name="auto_renew"] throughout the block. Unless there is a situation in which the input name exists but we have to use the element id to get the value? I know CiviCRM sometimes does weird things to allow people to de-select radio buttons which involve hidden fields. Thoughts? We could keep both the getElementById and the name business if we carefully wrap them to check for non null values.