Declaring array within variable for cascading dropdown javascript

Question

Im a beginner and Im having trouble figuring out on how to make this work. I'm not sure if I'm even saying this right, but I have to declare an array within another variable so that when a person clicks on a value in one dropdown, values relative to that show up on the next one dropdown. Right now, the values don't even show up on the dropdown. Any help would be appreciated.

var subjectObject = {
  "Serif": [
    "Times New Roman",
    "Georgia",
    "Garamound"
  ],
  "Sans-serif": [
    "Arial",
    "Verdana",
    "Helvetica"
  ],
  "Monospace": [
    "Courier New",
    "Lucida Console",
    "Monaco"
  ],
  "Cursive": [
    "Brush Script MT",
    "Lucida Handwriting"
  ],
  "Fantasy": [
    "Copperplate",
    "Papyrus"
  ]
};


window.onload = function() {
  var subjectSel = document.getElementById("subject");
  var topicSel = document.getElementById("topic");
  for (var x in subjectObject) {
    subjectSel.options[subjectSel.options.length] = new Option(x, x);
  }
  subjectSel.onchange = function() {    //empty Chapters- and Topics- dropdowns
       
    topicSel.length = 1;
    //display correct values
    for (var y of subjectObject[this.value]) {
      topicSel.options[topicSel.options.length] = new Option(y, y);
    }
  }
  topicSel.onchange = function() {
    var changeFontStyle = function(font) {
      document.getElementById(
        "demo").style.fontFamily = font.value; 
    }
  }
}

<p id="demo"> HEIIDXCD </p>
<form name="form1" id="form1" action="/action_page.php">
  Font Family:
  <select name="subject" id="subject">
    <option value="" selected="selected">Select Font Family</option>
  </select>
  <br><br> Font Names:
  <select name="topic" id="topic" onchange="changeFontStyle (this);">
    <option value="" selected="selected">Please select font family first</option>
  </select>
  <br><br>
</form>

Answer 1

A way to do that...
( forms and forms elements doesn't need to use ID attributes)

const
  pDemo = document.querySelector('p#demo')
, formOne = document.forms.form1
, subjectObject = 
  { 'Serif'      : [ 'Times New Roman', 'Georgia', 'Garamound' ] 
  , 'Sans-serif' : [ 'Arial', 'Verdana', 'Helvetica' ] 
  , 'Monospace'  : [ 'Courier New', 'Lucida Console', 'Monaco' ] 
  , 'Cursive'    : [ 'Brush Script MT', 'Lucida Handwriting' ] 
  , 'Fantasy'    : [ 'Copperplate', 'Papyrus' ] 
  };
for (let font in subjectObject)
  {
  formOne.subject.add( new Option(font,font))
  }
formOne.subject.onchange =_=>
  {
  formOne.topic.length = 1
  formOne.topic.value  = ''
  pDemo.textContent    = ' HEIIDXCD '
  for( let fontName of subjectObject[formOne.subject.value])
    {
    formOne.topic.add( new Option(fontName,fontName))
    }
  }
formOne.topic.onchange =_=>
  {
  pDemo.textContent      = formOne.subject.value + ' / ' + formOne.topic.value
  pDemo.style.fontFamily = formOne.topic.value; 
  }

<p id="demo"> HEIIDXCD </p>
<form name="form1" action="/action_page.php">
  Font Family:
  <select name="subject" >
    <option value="" selected disabled>Select Font Family</option>
  </select>
  <br><br> Font Names:
  <select name="topic" >
    <option value="" selected disabled>Please select font family first</option>
  </select>
  <br><br>
</form>