I am putting together a madlib site for a class and one of the parts of the assignment is to make a button that will randomly assign words from arrays into the madlib. I can’t figure out how to get that to work. I’ve tried a few different things, such as:
let nounArray = ["item1", "item2", "item3"];
function randomWord()
{
console.log(nounArray[(Math.floor(Math.random() * nounArray.length))]);
}
but it doesn’t seem to work the way I need it to. It keeps returning all of the items in the array, not just picking one. The little story looks like this:
let storyContent = "All of the " + nounArray + " and " + noun2Array + " were gone when he awoke, finding that the " + noun3Array + " now continued uninterrupted in their place. He tried to " + verbArray + " for help, but was " + adjectiveArray + " to find that his mouth was " + adjective2Array + ", the lower half of his face now " + adjective3Array + ", continuous flesh. He tried to " + verb2Array + " his panic by closing his eyes and counting to ten. On the eleventh second of darkness, he realised his mistake."
inside my madlib2() function.
Do I need to do something different with the nounArray, noun2Array, etc., within the storyContent? The main part of the assignment works (the part where you request that a person inputs different words and they are inserted into the story), this is the only part I can’t get to work. Any ideas? I’ll include the full Javascript below just in case.
var noun = [];
var noun2 = [];
var noun3 = [];
var verb = []
var verb2 = []
var adjective = [];
var adjective2 = [];
var adjective3 = [];
var storyContent = ""; //story that will be displayed when run
madlib(); //madlib function
function madlib()
{
let wordform = document.getElementById("wordform"); //calls the form in the HTML
let noun = document.getElementById("Noun").value;
let noun2 = document.getElementById("Noun2").value;
let noun3 = document.getElementById("Noun3").value;
let verb = document.getElementById("Verb").value;
let verb2 = document.getElementById("Verb2").value;
let adjective = document.getElementById("Adjective").value;
let adjective2 = document.getElementById("Adjective2").value;
let adjective3 = document.getElementById("Adjective3").value;
let storyContent = "All of the " + noun + " and " + noun2 + " were gone when he awoke, finding that the " + noun3 + " now continued uninterrupted in their place. He tried to " + verb + " for help, but was " + adjective + " to find that his mouth was " + adjective2 + ", the lower half of his face now " + adjective3 + ", continuous flesh. He tried to " + verb2 + " his panic by closing his eyes and counting to ten. On the eleventh second of darkness, he realised his mistake."
document.getElementById("content").innerHTML = storyContent;
}
let generateBtn = document.getElementById("button");
generateBtn.addEventListener('click', madlib);
const nounArray = ["pebbles", "shoes", "trees"];
let noun2Array = ["seats", "books", "houses"];
let noun3Array = ["balls", "games", "spatulas"];
let verbArray = ["bolt", "leap", "fall"];
let verb2Array = ["lay", "sing", "skate"];
let adjectiveArray = ["golden", "chosen", "eerie"];
let adjective2Array = ["cautious", "slim", "probable"];
let adjective3Array = ["wide", "ossified", "overjoyed"];
function madlib2()
{
let storyContent = "All of the " + nounArray + " and " + noun2Array + " were gone when he awoke, finding that the " + noun3Array + " now continued uninterrupted in their place. He tried to " + verbArray + " for help, but was " + adjectiveArray + " to find that his mouth was " + adjective2Array + ", the lower half of his face now " + adjective3Array + ", continuous flesh. He tried to " + verb2Array + " his panic by closing his eyes and counting to ten. On the eleventh second of darkness, he realised his mistake."
document.getElementById("content").innerHTML = storyContent;
}
let randomBtn = document.getElementById("button2");
randomBtn.addEventListener('click', madlib2);
function showhide()
{
var div = document.getElementById("content");
div.classList.toggle('hidden');
var div = document.getElementById("end");
div.classList.toggle('hidden');
var div = document.getElementById("line");
div.classList.toggle('hidden');
}
function randomWord()
{
console.log(nounArray[(Math.floor(Math.random() * nounArray.length))]);
}
randomWord()
I tried the things I mentioned above and they didn’t work.