The issue I am having is the second select menu is not showing via the function.
I followed the [link][1] here and I am still not getting this to work
[enter image description here][2]
Update: Tried to get more advance with this code and am having issues. The error I keep getting is:
"TypeError: Cannot read property 'style' of null at scheduling (:7:20) at 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>
Here is the code: