Looking for some help here - I want my user prompts to be displayed in block form, while the user story and error messages should remain hidden until the user enters their inputs. However, my script seems to be malfunctioning and I can't figure out what's wrong.
Edit: Thanks to everyone who helped me fix the display block issue. But now, when I added a condition to ensure all fields are filled before submission, the error message appears prematurely on the page. Any assistance with this would be greatly appreciated.
const userprompts = document.querySelector("#prompts");
const userstory = document.querySelector("#story");
const usererror = document.querySelector("#error");
const submit = document.querySelector("#submit");
submit.addEventListener("click", completestory, false);
const reset= document.querySelector("#reset");
reset.addEventListener("click", resetPage, false);
document.querySelector('#name').focus();
const thename = document.querySelector("#name");
const firstverb = document.querySelector("#firstverb");
const firstnoun = document.querySelector("#firstnoun");
const adjective = document.querySelector("#adjective");
const secondnoun = document.querySelector("#secondnoun");
const adverb = document.querySelector("#adverb");
const place = document.querySelector("#place");
const storyOutput = document.querySelector("#storyOutput");
userprompts.classList.add("displayBlock");
userstory.classList.add("displayNone");
usererror.classList.add("displayNone");
function checkStory() {
if (thename.value == "" && firstverb.value == "" && firstnoun.value == "" && adjective.value == "" && secondnoun.value == "" && adverb.value == "" && place.value == "") {
error.classname.add("displayBlock");
return false;
}
else {
return true:
}
}
function completestory() {
let finishedstory = "";
finishedstory += "There once was a person named " + thename.value + ". ";
finishedstory += "One day, " + thename.value + " was " + firstverb.value + " out in the "
+ firstnoun.value + ". ";
finishedstory += "All of a sudden, " + thename.value + " saw a " + adjective.value +
" dragon! " ;
finishedstory += thename.value + " thought for a second and did the only thing that came to mind "
+ " and grabbed a " + secondnoun.value + ". " ;
finishedstory += "With the " + secondnoun.value + " in hand, " + thename.value + " jumped up and " + adverb.value + " attacked the dragon.";
finishedstory += " The dragon became very confused and left. Our hero returned to their ancestral home of " + place.value + " ." + " The End?";
storyOutput.innerHTML = finishedstory;
userprompts.classList.add("displayNone");
userstory.classList.add("displayBlock");
usererror.classList.add("displayNone");
userprompts.classList.remove("displayBlock");
userstory.classList.remove("displayNone");
usererror.classList.remove("displayBlock");
if (checkStory == false); {
return;
}
}
function resetPage() {
userprompts.classList.add("displayBlock");
story.classList.add("displayNone");
error.classList.add("displayNone");
userprompts.classList.remove("displayNone");
userstory.classList.remove("displayBlock");
usererror.classList.remove("displayBlock");
thename.value = "";
firstverb.value = "";
firstnoun.value = "";
adjective.value = "";
secondnoun.value = "";
adverb.value = "";
storyOutput.innerHTML = "";
thename.focus();
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<link rel="stylesheet" href="Mod3Layout.css">
<meta charset="utf-8">
<title>Sean's Mad Lib</title>
</head>
<body>
<h1> Sean's Wacky Mad Lib</h1><hr>
<div id="prompts">
<h3>Please enter your prompts here</h3>
<p>Enter a name here:
<input id="name" type="text" placeholder="name">
</p>
<p>Enter a verb here:
<input id="firstverb" type="text" placeholder="verb 1">
</p>
<p>Enter a noun here:
<input id="firstnoun" type="text" placeholder="noun 1">
</p>
<p>Enter an adjective here:
<input id="adjective" type="text" placeholder="adjective">
</p>
<p>Enter another noun here:
<input id="secondnoun" type="text" placeholder="noun 2">
</p>
<p>Enter an adverb here:
<input id="adverb" type="text" placeholder="adverb">
</p>
<p>Finally, Enter a place here:
<input id="place" type="text" placeholder="place"
</p><br>
<button id="submit" type="button">Submit</button>
<p id="error">You did not answer all the questions. Please try
again</p>
</div>
<div id="story">
<p>Let's see what you wrote.</p>
<p id="storyOutput">Hello Dave</p>
<button id="reset" type="button" name="Reset">Reset</button>
</div>