2017-08-28 6 views
0

問題は、2番目の選択メニューが機能を介して表示されていないことです。javascript隠し機能の選択

私はここに[1]、[リンク]を続き、私はまだこれが

を動作するようになっていないです[ここに画像の説明を入力します] [2]

更新: はこれでより多くの進歩を取得しようとしましたコードがあり、問題があります。私は入れませんエラーは、次のとおりです。

"はTypeError:スケジューリングでヌル のプロパティ 'スタイル' を読み取ることができません(:7:20) HTMLSelectElement.onchangeで(https://null.jsbin.com/runner:1:298)"

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title></title> 
 
    </head> 
 
    <body> 
 
    <div> 
 
    <form> 
 
     <p>Please do the following: <textarea> </textarea> <br /> <br /> Please do the follwing:</p> 
 
<select id="actions" onchange = scheduling()> 
 
    <option value=" "></option> 
 
    <option value="report">Report</option> 
 
    <option value="schedule">Schedule</option> 
 
    <option value="research">Research</option> 
 
    <option value="go to">Go to</option> 
 
</select> 
 
<p><input type="submit" /></p> 
 
    </form> 
 
    </div> 
 
    <fieldset> 
 
    <div name = "Schedule"> 
 
    <form id = scheduleProtocol style= "visibility:hidden"> 
 
     <p> With who? </p> <textarea> </textarea> <br> 
 
     <p> Schedule what?</p> 
 
     <select> 
 
     <option value = "Breakfast"> Breakfast</option> 
 
     <option value = "Lunch"> Lunch</option> 
 
     <option value = "Dinner"> Dinner</option> 
 
     <option value = "A Call "> A Call </option> 
 
     </select> 
 
     <br> 
 
     <div name = "Schedule_Purpose"> 
 
     <p> For what purpose? </p> 
 
     <select> 
 
     <option value="Catching Up"> Catching Up</option> 
 
     <option value="Building Relationship/s"> Building Relationships </option> 
 
     <option value="Sales">Sales</option> 
 
     <option value="Customer Success"> Customer Success</option> 
 
     <option value="Advice">Advice</option> 
 
     <option value="Learning">Learning</option> 
 
     <option value= "Team Building"> Team Building</option> 
 
     <option value= "Problem Solving"> Problem Solving</option> 
 
     <option value= "Funding/Investment"> Funding/Investment</option> 
 
     <option value = "Shared Goal/ Bucket List"> Shared Goal/ Bucket List</option> 
 
     <option value ="Relationship Maintenance"> Relationship Maintenance</option> 
 
     <option value ="Strategic Partnership"> Strategic Partnership</option> 
 
    </select> 
 
    </div> 
 
    <br> 
 
    <p> Where? </p> 
 
    <select> 
 
    <option value="to You"> Convenient to You </option> 
 
    <option value="to them"> Convenient to them </option> 
 
    <option value="both Parties">Both Parties</option> 
 
</select> 
 
<br> 
 
<p>When?</p> 
 
    <select> 
 
    <option value="Exact Date">Exact Date</option> 
 
    <option value="Next Week"> Within the next week </option> 
 
    <option value="Next Two Weeks">Within the next two weeks</option> 
 
    <option value="Quarterly">Quarterly</option> 
 
    </select> 
 
    <br> 
 
    <br> 
 
    <input type = "submit"> 
 
    </fieldset> 
 
    <div name = "Report Values"> 
 
    <select> 
 
     <p> Report to me: when? </p> 
 
     <option value = "Monday">Monday</option> 
 
     <option value ="Tuesday"> Tuesday</option> 
 
     <option value = "Wednesday"> Wednesday</option> 
 
     <option value = "Thursday">Thursday</option> 
 
     <option value ="Friday"> Friday </option> 
 
     <option value = "Saturday"> Saturday</option> 
 
     <option value = "Sunday"> Sunday </option> 
 
    </select> 
 
    <br> 
 
    <p> At what time?</p> 
 
    <select> 
 
     <option value = "1 pm"> 1 pm</option> 
 
     <option value ="2 pm"> 2 pm</option> 
 
     <option value = "3 pm"> 3 pm</option> 
 
     <option value = "4 pm"> 4 pm</option> 
 
     <option value ="5 pm"> 5 pm </option> 
 
     <option value = "6 pm"> 6 pm</option> 
 
     <option value = "7 pm"> 7 pm</option> 
 
    </select> 
 
    </div> 
 
    </form> 
 
    </div> 
 
<script> 
 
function scheduling() { 
 
    var selectedItems = document.getElementById('actions'); 
 
    var userInput = selectedItems.options[selectedItems.selectedIndex].value; 
 
    var scheduleProtcol = document.getElementById('scheduleProtcol'); 
 
    if (userInput == "schedule") { 
 
    scheduleProtcol.style.visibility = "visible"; } 
 
    else { 
 
     scheduleProtcol.style.visibility = "hidden"; 
 
    } 
 
} 
 
</script> 
 

 
    </body> 
 
</html>

ここで
+0

...だろうが簡単に問題をデバッグする –

+0

あなたはコードの画像を与える場合、私はあなたを助けることはできません。 – zynkn

答えて

1

コードです:

<select id="list" onchange="return showApples()"> 
<option value="AL">Grapes</option> 
<option value="NL">Apple</option> 
</select> 

<select id="AppleTypes"style="visibility:hidden"> 
<option value="GR">Granny</option> 
</select> 

<script> 
    function showApples() 
    { 
     var selectedItems = document.getElementById("list"); 
     var userInput = selectedItems.options[selectedItems.selectedIndex].value; 

     if (userInput == "NL") 
     document.getElementById("AppleTypes").style.visibility = "visible"; 
     else 
     document.getElementById("AppleTypes").style.visibility = "hidden"; 
    } 
</script> 
1

function showApples(){ 
 
     var selectedItems = document.getElementById("list"); 
 
     var appleTypes = document.getElementById("AppleTypes") 
 
     var userInput = selectedItems.options[selectedItems.selectedIndex].value; 
 
     if (userInput == "NL"){ 
 
     appleTypes.style.visibility = "visible"; 
 
     } 
 
     else{ 
 
     appleTypes.style.visibility = "hidden"; 
 
     } 
 
    }
<form> 
 
    <select id="list" onchange="showApples()"> 
 
    <option value="nothing"></option> 
 
    <option value="NL">Apple</option> 
 
    <option value="AL">Ball</option> 
 
    <option value="DL">Cat</option> 
 
    </select> 
 

 
    <select id="AppleTypes"style="visibility:hidden"> 
 
    <option value="GR">Granny</option> 
 
    <option value="FU">Fuji</option> 
 
    </select> 
 
</form>

あなたの間違ったコード:<select id="list" onChange="return showApples()">

は次のように変更する必要があります:あなたがここにウルのコードやコードスニペットを提供できる場合<select id="list" onchange="showApples()">

onChange =>onchange

+0

うわー。小さな変更ありがとう!これは非常に役に立ちました! –

関連する問題