How to show a div section onclick radio button using javascript not jquery:

November 12, 2021

New to programming and haven’t done much javascript before just the html and css. Tried finding examples to do this but still struggling. I used a code i found online and tried to tweak it but i still can’t get the "yes" radio button to display the lower div called #current_school_details (which is currently set to display:none in css ). Any help will be appreciated.

function selectFunction() {
  var yes = document.getElementById("gridRadios1");
  var current_school_details = document.getElementById("current_school_details");
  if (option1.checked === true) {
    current_school_details.style.display = "block";
  } else {
    current_school_details.style.display = "none";
  }
}

<legend class="col-form-label col-sm-12 pt-0">Are you currently a Twyford student?*</legend>
<div class="col-sm-10">
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" onclick="selectFunction();">
    <label class="form-check-label" for="gridRadios1">
                        Yes
                        </label>
  </div>
  <div class="form-check">
    <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2" onclick="selectFunction();">
    <label class="form-check-label" for="gridRadios2">
                        No
                        </label>
  </div>
</div>
</div>
<!--HIDDEN DROP DOWN FOR CURRENT SCHOOL DETAILS YES OR NO-->
<div id="current_school_details">
  <h2>Current School Details</h2>
  <select class="form-control">
    <option>--select--</option>
    <option>Twyford CofE High School</option>
    <option>Ealing Fields High School</option>
    <option>William Perkin CofE High School</option>
  </select>
</div>

>Solution :

Firstly, Option1 is not defined which will give you a referenceError. And you will get a event object as a parameter which can be accessed to see if radio which as invoked this callback is checked or not

function selectFunction(event) {
  var current_school_details =document.getElementById("current_school_details");
  if (event.target.checked === true) {
    current_school_details.style.display = "block";
  } else {
    current_school_details.style.display = "none";
  }
}