Can't keep CSS change via Javascript

Question

I have a simple "select" - show below.

<label>Best way to reach you?</label><br>
    <select id="contactMethod">
        <option value="wp">Work Phone?</option>
        <option value="cp">Personal Cell Phone?</option>
        <option value="email">Email?</option>
        <option value="Im">Instant Messanger?</option>
    </select>
<button onclick="showHidden()">Which way?</button>

the object I wish to show is in the HTML with the following properties:

<label>E-mail Address:</label>
<input id="email" type="text" style='display:none'>

I then have a .js file with the following function.

function showHidden() {
    var dropSelection = document.getElementById("contactMethod").value;
    console.log(dropSelection)

    if(dropSelection == "email") {
        document.getElementById("email").style.display = "block";
    }
}

I then have the id listed within my CSS as the following:

#email{ display:none; }

The goal is to "show" the email text box when the "email" option is selected from the <select> above.

As of right now, I'm simply printing what was selected, so I can know for sure that I'm getting the right values to run the if statement against. That being said, when I select the email option, it literally flashes the email text box but immediately reverts back to a hidden state.

UPDATED CODE

<label>Best way to reach you?</label><br>
    <select onchange="showHidden()"  id="contactMethod">
        <option value="select">Select...</option>
        <option value="email">Email</option>
        <option value="phone">Work Phone</option>
        <option value="cPhone">Cell Phone</option>
        <option value="Im">Instant Messanger</option>
    </select>

MODIFIABLE FIELDS

<label id="emailLabel">E-mail Adress:</label>
<input id="email" type="text">
<label id="phoneLabel">Work Phone Number</label>
<input id="phone" type="text">
<label id="cPhoneLabel">Personal Cell Phone Number</label>
<input id="cPhone" type="text">
<label id="IMLabel">Instant Messenger Name</label>
<input id="Im" type="text">

JS

function showHidden() {
    var dropSelection = document.getElementById("contactMethod").value;

    if(dropSelection == "email") {
        document.getElementById("email").style.display = "block";
        document.getElementById("emailLabel").style.display = "inline";
    }
    else if(dropSelection == "phone") {
        document.getElementById("phone").style.display = "block";
        document.getElementById("phoneLabel").style.display = "inline";
    }
    else if(dropSelection == "cPhone") {
        document.getElementById("cPhone").style.display = "block";
        document.getElementById("cPhoneLabel").style.display = "inline";
    }
    else if(dropSelection == "Im") {
        document.getElementById("Im").style.display = "block";
        document.getElementById("IMLabel").style.display = "inline";
    }   
}

Answer 1

 function showHidden(){ var dropSelection = document.getElementById("contactMethod").value; console.log(dropSelection) if(dropSelection == "email"){ document.getElementById("email").style.display = "block"; } } 

 #email{ display:none; } 

 <label>Best way to reach you?</label> <br> <select id="contactMethod"> <option value="wp">Work Phone?</option> <option value="cp">Personal Cell Phone?</option> <option value="email">Email?</option> <option value="Im">Instant Messanger?</option> </select> <br> <button onclick="showHidden()">Which way?</button> <br> <label>E-mail Adress:</label> <br> <input id="email" type="text" display="none"> <br> 

I don't see any problem, it works fine.