RoflWaffle17 RoflWaffle17 - 1 month ago 7
CSS Question

Can't keep CSS change via Javscript

I know this might be duplicate, but the ones I've seen relating to this haven't seem to work/help.

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><br>
<button onclick="showHidden()">Which way?</button><br>


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

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


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 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.

I appreciate any and all help!

Thanks

Answer

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.

Comments