ドロップダウンメニューから値を取得して、適切なHTMLが表示されないようにする

Question

Look Up Temperature By: 
    <select id="dropdown"> 
     <option value="city" selected="selected">City</option> 
     <option value="coordinates">Coordinates</option> 
     <option value="zip">Zip</option> 
    </select> 

    <script type="text/javascript"> 
     var menu = document.getElementById("dropdown"); 
     var selected = menu.options[menu.selectedIndex].text; 
    </script> 

    <script> 
     if(selected == "Zip"){ 
      document.getElementById("zip").style.visibility = visible; 
      document.getElementById("city").style.visibility = hidden; 
      document.getElementById("coordinates").style.visibility = hidden; 
     } 
     if(selected == "City"){ 
      document.getElementById("zip").style.visibility = hidden; 
      document.getElementById("city").style.visibility = visible; 
      document.getElementById("coordinates").style.visibility = hidden; 
     } 
     if(selected == "Coordinates"){ 
      document.getElementById("zip").style.visibility = hidden; 
      document.getElementById("city").style.visibility = hidden; 
      document.getElementById("coordinates").style.visibility = visible; 
     } 
    </script> 

    <form method="POST" action="/temperature" style="visibility:hidden;" id="zip" position="absolute"> 
       Enter Your Zip Code: <input type="text" name="zip"> 
       <input type="submit"> 
    </form> 
    <form method="POST" action="/temperature" style="visibility:hidden;" id="city" position="absolute"> 
       Enter Your City: <input type="text" name="city"> 
       <input type="submit"> 
    </form> 
    <form method="POST" action="/temperature" style="visibility:hidden;" id="coordinates" position="absolute"> 
       Enter Your Coordinates Values: <input type="texdt" name="coordinates" id="coordinates"> 
       <input type="submit"> 
    </form> 

私がやっていることは、ドロップダウンメニューから値を取得して値に応じて望ましいHTMLフォームを表示することです。

1. JavaScriptのチャック全体が機能していないようです。私は "選択された"変数を印刷しましたが、値は返されません
2. "これを表示するが他のすべては隠しておく"効率的な方法はありますか？

Answer 1

問題は、変数の代わりに、文字列として渡さvisible/hiddenから来る：

if(selected == "Zip"){ 
    document.getElementById("zip").style.visibility = "visible"; 
    document.getElementById("city").style.visibility = "hidden"; 
    document.getElementById("coordinates").style.visibility = "hidden"; 
} 

の代わりに：

Uncaught ReferenceError: hidden is not defined

：

if(selected == "Zip"){ 
    document.getElementById("zip").style.visibility = visible; 
    document.getElementById("city").style.visibility = hidden; 
    document.getElementById("coordinates").style.visibility = hidden; 
} 

をあなたのコンソールにエラーメッセージを見ることができました

また、あなたのタラを包むようにしてくださいユーザーが選択リストのオプションを変更するたびに呼び出される変更イベント内に表示されます。

menu.addEventListener("change", function() { 
    //You conditions here 
} 

var menu = document.getElementById("dropdown"); 
 

 
menu.addEventListener("change", function() { 
 
    var selected = menu.options[menu.selectedIndex].text; 
 
    
 
    if(selected == "Zip"){ 
 
    document.getElementById("zip").style.visibility = "visible"; 
 
    document.getElementById("city").style.visibility = "hidden"; 
 
    document.getElementById("coordinates").style.visibility = "hidden"; 
 
    } 
 
    if(selected == "City"){ 
 
    document.getElementById("zip").style.visibility = "hidden"; 
 
    document.getElementById("city").style.visibility = "visible"; 
 
    document.getElementById("coordinates").style.visibility = "hidden"; 
 
    } 
 
    if(selected == "Coordinates"){ 
 
    document.getElementById("zip").style.visibility = "hidden"; 
 
    document.getElementById("city").style.visibility = "hidden"; 
 
    document.getElementById("coordinates").style.visibility = "visible"; 
 
    } 
 
})

Look Up Temperature By: 
 
<select id="dropdown"> 
 
    <option value="city" selected="selected">City</option> 
 
    <option value="coordinates">Coordinates</option> 
 
    <option value="zip">Zip</option> 
 
</select> 
 

 
<form method="POST" action="/temperature" style="visibility:hidden;" id="zip" position="absolute"> 
 
    Enter Your Zip Code: <input type="text" name="zip"> 
 
    <input type="submit"> 
 
</form> 
 
<form method="POST" action="/temperature" style="visibility:hidden;" id="city" position="absolute"> 
 
    Enter Your City: <input type="text" name="city"> 
 
    <input type="submit"> 
 
</form> 
 
<form method="POST" action="/temperature" style="visibility:hidden;" id="coordinates" position="absolute"> 
 
    Enter Your Coordinates Values: <input type="texdt" name="coordinates" id="coordinates"> 
 
    <input type="submit"> 
 
</form>