Trouble trying to overriding !important style

Question

My goal is to make the fields for filling out an ecommerce checkout address appear after the user starts typing the zip code.

For that, I wrote this JS code below

<script>


window.onload = function(){
    document.getElementById('billing_postcode').onclick = function(){
    //console.log('Hello world');
   
document.getElementById('billing_address_1_field').element.style.setProperty("display", "block", "important");

document.getElementById('billing_address_2_field').element.style.setProperty("display", "block", "important");

document.getElementById('billing_billing_number_field').element.style.setProperty("display", "block", "important");

document.getElementById('billing_city_field').element.style.setProperty("display", "block", "important");

document.getElementById('billing_state_field').element.style.setProperty("display", "block", "important");
  }
}



</script>   

And this is the CSS I need to overwrite

#billing_address_1_field {
    display: none !important;
}

#billing_address_2_field{
    display: none !important;
}

#billing_billing_number_field{
    display: none !important;
}

#billing_city_field{
    display: none !important;
}

#billing_state_field{
    display: none !important;
}

I'm getting this error on the console

Uncaught TypeError: Cannot read property 'style' of undefined
    at HTMLInputElement.document.getElementById.onclick ((index):384)
document.getElementById.onclick @ (index):384

Thank you in advance for your help!

Answer 1

Perhaps try removing the 'element' from each of the 'setProperty' statements. ie: document.getElementById('billing_state_field').style.setProperty("display", "block", "important");