I need assistance with my code for a HTML/JS assignment. I have 3 strories that can be chose, but the get started button is not starting a prompt for a user to enter anything to generate a madlib story.

HTML:

Let's do some Mad Libs!

---

Pick a story:

Advice on Bears

How to Choose a Book

A Visit to the Dentist

If you go to some place like Yellowstone National , you must know how to deal with the wild animals such as bears and wolves and . The most important of these is the bear. There are three kinds of bears, the grizzly bear, the bear, and the bear. Bears spend most of their time or . They look very , but if you make them , they might bite your . Bears will come up to your car and beg for . They will stand on their hind legs and clap their together and pretend to be . But do not get out of your or offer the bears or . This same advice applies to other wild creatures such as and . Remember all these rules and you will spend your vacation and not get eaten by a/an .

There are many ways to choose a/an to read. First, you could ask for recommendations from your friends and . Just don't ask Aunt —she only reads books with -ripping goddesses on the cover. If your friends and family are no help, try checking out the review in The Times. If the featured there are too for your taste, try something a little more low-, like : The Magazine, or Magazine. You could also choose a book the -fashioned way. Head to your local library or and browse the shelves until something catches your . Or, you could save yourself a whole lot of trouble and watch TV instead!

A one-act play to be performed by two in this room. PATIENT: Thank you so very much for seeing me, Doctor , on such notice. DENTIST: What is your problem, young ? PATIENT: I have a pain in my upper , which is giving me a severe ache. DENTIST: Let me take a look. Open your wide. Good. Now I'm going to tap your with my . PATIENT: Shouldn't you give me a/an killer? DENTIST: It's not necessary yet. ! I think I see a/an in your upper . PATIENT: Are you going to pull my out? DENTIST: No, I'm going to your tooth and put in a temporary . PATIENT: When do I come back for the filling? DENTIST: A day after I cash your .

CSS:

body {

font-family: 'EB Garamond', serif;

margin: 0;

background: lightsalmon;

color: rgb(75, 4, 0);

font-size: 1.5rem;

}

h1 {

text-align: center;

font-family: 'Quicksand', sans-serif;

font-size: 5rem;

letter-spacing: -0.5rem;

line-height: 90%;

margin: 0;

padding: 1%;

background: deepskyblue;

color: seashell;

}

hr {

border: none;

height: 1rem;

margin: 0;

background: bisque;

}

label {

display: inline-block;

margin-bottom: 5%;

width: 13rem;

}

span {

color: firebrick;

font-size: 110%;

}

select {

border: none;

font-family: 'Quicksand', sans-serif;

background: seashell;

font-size: 1rem;

}

input {

border: none;

font-family: 'Quicksand', sans-serif;

font-size: 1.1rem;

width: 10rem;

text-align: center;

background-color: seashell;

}

button {

padding:5px;

background-color: rgb(75, 4, 0);

border: none;

color: bisque;

font-family: 'Quicksand', sans-serif;

border-radius: 1rem;

padding: 0.3rem 0.5rem;

font-size: 0.8rem;

}

button:hover {

background-color: firebrick;

}

#chooseAgain {

margin-right: 2rem;

}

.hidden {

display:none;

}

#finishedStory p {

text-align: justify;

padding: 0 10%;

text-indent: 2rem;

}

#container {

margin: 0 auto;

max-width: 700px;

padding: 20px;

text-align: center;

}

JS:

//select buttons for event listeners

var getStoryButton = document.querySelector("#getStory");

var resetButton = document.querySelector("#reset");

var getFormButton = document.querySelector("#getForm");

var chooseAgain = document.querySelector("#chooseAgain");

// select div sections for showing/hiding

var selectStory = document.querySelector("#selectStory");

var storyForm = document.querySelector("#storyForm");

var finshedStory = document.querySelector("#finishedStory");

//select input div for populating the list/clearing the list

var inputs = document.querySelector("#storyForm div");

//select the user's choice for story from dropdown

var chosenStory = document.querySelector("select");

//establish visibity of story

var storyVisible = false;

//array containing data for each story

var story = {

bear: [

[

"Adjective",

"Noun",

"Plural noun",

"Adjective",

"Adjective",

"Verb (ending -ing)",

"Verb (ending -ing)",

"Adjective",

"Adjective",

"Noun",

"Food (plural)",

"Part of the body (plural)",

"Adjective",

"Vehicle",

"Food (plural)",

"Food (plural)",

"Something alive (plural)",

"Something alive (plural)",

"Adverb",

"Noun"

],

"#bearText",

"#bearText span"

],

book: [

[

"Adjective",

"Noun",

"Plural noun",

"Person in room (female)",

"Adjective",

"Article of clothing",

"Noun",

"City",

"Plural noun",

"Adjective",

"Part of the body",

"Letter of the alphabet",

"Celebrity",

"Plural Noun",

"Adjective",

"Place",

"Part of the body",

"Adjective",

"Genre"

],

"#bookText",

"#bookText span"

],

dentist: [

[

"Plural noun",

"Person in room (last name)",

"Adjective",

"Noun",

"Noun",

"Part of the body",

"Part of the body",

"Plural noun",

"Noun",

"Noun",

"Exclamation",

"Noun",

"Noun",

"Noun",

"Verb",

"Noun",

"Adjective",

"Noun"

],

"#dentistText",

"#dentistText span"

]

};

//hide selection dropdown and show generated form for user word inputs

getFormButton.addEventListener("click", function(){

makeForm();

selectStory.classList.add("hidden");

storyForm.classList.remove("hidden");

});

chooseAgain.addEventListener("click", function(){

selectStory.classList.remove("hidden");

storyForm.classList.add("hidden");

inputs.innerHTML = "";

});

//generate story, hide form and show finished story

getStoryButton.addEventListener("click", function(){

storyVisible = true;

makeStory();

showHideStory();

});

//reset button to try again!

resetButton.addEventListener("click", function () {

storyVisible = false;

showHideStory();

inputs.innerHTML = "";

});

// generate form based on selected story from dropdown

function makeForm(){

var storyChoice = story[chosenStory.value][0];

for(var i = 0; i < storyChoice.length; i++){

inputs.innerHTML += "" + storyChoice[i] + ' ';

}

}

//use user inputted words to build story from base text

function makeStory(){

var wordSlots = document.querySelectorAll(story[chosenStory.value][2]);

var inputWords = document.querySelectorAll("input");

//set answers in the form to corresponding span slot in story

for(var i = 0; i < wordSlots.length; i++){

wordSlots[i].textContent = inputWords[i].value;

}

}

//alter the visibility of text sections depending on if story shoud be seen or app reset

function showHideStory(){

var storyText = document.querySelector(story[chosenStory.value][1]);

if(storyVisible) {

storyText.classList.remove("hidden");

finishedStory.classList.remove("hidden");

storyForm.classList.add("hidden");

}

else {

storyText.classList.add("hidden");

finishedStory.classList.add("hidden");

selectStory.classList.remove("hidden");

}

}

It works on CodePen.io but I cannot seem to get it to work correctly using notepad..

https://codepen.io/kenzable/pen/eZqBMa