RoflWaffle17 RoflWaffle17 - 12 days ago 6
Javascript Question

Can't keep CSS change via Javascript

I know this might be duplicate, but the ones I've seen relating to this haven't seemed 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>
<button onclick="showHidden()">Which way?</button>


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

<label>E-mail Adress:</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

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.