Блог

У меня есть простой «выбор» — показать ниже.

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

объект, который я хочу показать, находится в HTML со следующими свойствами:

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

Затем у меня есть файл .js со следующей функцией.

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

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

Затем у меня есть идентификатор, указанный в моем CSS следующим образом:

 #email{ display:none; }
  

Цель состоит в том, чтобы «показать» текстовое поле электронной почты, когда выбран параметр «электронная почта» из приведенных <select> выше.

На данный момент я просто печатаю то, что было выбрано, поэтому я могу быть уверен, что получаю правильные значения для выполнения оператора if. При этом, когда я выбираю опцию электронной почты, она буквально отображает текстовое поле электронной почты, но сразу же возвращается в скрытое состояние.

ОБНОВЛЕННЫЙ КОД

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

ИЗМЕНЯЕМЫЕ ПОЛЯ

 <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";
    }   
}
  

 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>  

Я не вижу никаких проблем, все работает нормально.