所以我试图让我的userprompts显示block，我的userstory和usererror在用户输入输入之前不显示任何内容。我不明白我的脚本在哪里出错了
编辑：所以我让我的displayblock工作（感谢那些人），但我试图添加一个条件语句，以确保用户输入所有字段，现在我的错误弹出页面输入任何输入之前。任何帮助表示赞赏
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>通过使用jquery，您可以应用css。请参考下面的代码
使用jquery应用css的示例代码。
$("#prompts").css("background-color", "yellow");
示例代码以应用类名jquery。
$( "#prompts" ).addClass( "displayBlock" );
你甚至可以同时删除和添加课程。
$( "#prompts" ).removeClass( "displayNone" ).addClass( "displayBlock" );
在vanilla JS中，我建议使用.style属性来改变CSS中的任何内容。
示例：
document.getElementById("myDIV").style.display = "none";
资源 ：
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style https://www.w3schools.com/jsref/prop_style_display.asp
但在你的情况下，你正在尝试添加一个类。
要在vanilla JS中添加类，我建议使用classList方法。
添加示例：
const element = document.querySelector("#myDIV");
element.classList.add("mystyle");
删除示例：
const element = document.querySelector("#myDIV");
element.classList.remove("mystyle");
资源 ：
https://www.w3schools.com/howto/howto_js_add_class.asp https://www.w3schools.com/howto/howto_js_remove_class.asp
您需要添加类并在用户操作上删除它们。可以使用element.classList.add()添加类，并使用element.classList.remove()删除这些类也不会在您尝试添加的类上设置css属性。运行代码段以查看这是否是您想要的
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() {
}
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");
}
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();
}.displayBlock{
display: block;
}
.displayNone{
display: none;
}<!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>