Session 08 - Javascript, Part 1
Code Examples

• Example 7.1 - Exposing Additional Form Elements
  Example 7.1
  Codepen - Example 7.1
  <form method="post" name="ice_cream" id="ice_cream" action="https://cs12.net/form/submit.php" enctype="application/x-www-form-urlencoded"><fieldset><legend>Would you like ice cream?</legend><label><input type="radio" name="want" id="ic_yes" value="yes"/>Yes</label><label><input type="radio" name="want" id="ic_no" value="no"/>No</label></fieldset><fieldset id="icecream_options"><legend>Ice Cream Options</legend><fieldset><legend>Would you like a cup or a cone?</legend><label><input type="radio" id="container_cup" name="container" value="cup"/>Cup</label><label><input type="radio" id="container_cone" name="container" value="cone"/>Cone</label></fieldset><fieldset><legend>What topping do you want?</legend><label><input type="checkbox" name="toppings" id="toppings_wc" value="whipcream"/>Whipped cream</label><label><input type="checkbox" name="toppings" id="toppings_jimmies" value="jimmies"/>Jimmies</label><label><input type="checkbox" name="toppings" id="toppings_sprinkles" value="sprinkles"/>Sprinkles</label><label><input type="checkbox" name="toppings" id="toppings_nuts" value="nuts"/>Nuts</label><label><input type="checkbox" name="toppings" id="toppings_cherry" value="cherry"/>Cherry</label></fieldset></fieldset><button type="submit">Submit Order</button></form>label { display: block; } input[type=submit], button[type=submit] { display: block; } form fieldset { margin-bottom: 1rem; } #icecream_options { border-style: none; } button.clicked { border: 3px solid purple; } ul.resourcelist { border: 2px solid black; border-radius: 5px; } .hidden { display: none; } body { font-family: helvetica, sans-serif; margin: 1rem; line-height: 1.5; }document.addEventListener('DOMContentLoaded',function(){ console.log("dom is loaded!"); let iceCreamOptions = document.querySelector('#icecream_options'); iceCreamOptions.classList.add("hidden"); let wantRadioInputs = document.querySelectorAll("form input[name=want]"); wantRadioInputs.forEach(function(el){ console.log(el); el.addEventListener("click",function(){ console.log("radio button was just clicked!"); let yesRadio = document.querySelector('#ic_yes'); if (yesRadio.checked == true) { console.log("Yes is checked!"); iceCreamOptions.classList.remove("hidden"); } else { console.log("Yes is NOT checked"); iceCreamOptions.classList.add("hidden"); } }) }); });JSFiddle - Example 7.1