我确定这是一个简单的修复程序，但是我看不到问题所在。我正在关注制作JS Mad Lib的教程，并且想尝试输出。添加更多输入。好吧，当我输入所有输入时。它变成空白。请记住，这是一个正在进行的项目，而不是已完成的项目。感谢您的帮助
const userprompts = document.querySelector("#prompts");
const story = document.querySelector("#story");
const error = 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 storyOutput = document.querySelector("#storyOutput")
window.addEventListener("keydown", keydownHandler, false);
function keydownHandler(event) {
console.log("Enter key pressed");
}
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 they could think of "
+ "They grabbed a " + secondnoun.value + ". " ;
finishedstory += "With the " + secondnoun.value + "in hand. " + thename.value + adverb.value + "attacked the dragon.";
finishedstory += "The dragon became very confused and left. The End";
storyOutput.innerHTML = finishedstory();
}
function resetPage() {
}<!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>Finally, Enter an adverb here:
<input id="adverb" type="text" placeholder="adverb">
</p>
<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>
答案 0 :(得分：0)
由于Uncaught TypeError: finishedstory is not a function函数中的这一行，您收到错误completestory：
storyOutput.innerHTML = finishedstory();
根据您的定义，finishedstory是String；只需将该行更改为storyOutput.innerHTML = finishedstory;，就不会再触发该错误。
const userprompts = document.querySelector("#prompts");
const story = document.querySelector("#story");
const error = 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 storyOutput = document.querySelector("#storyOutput")
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 they could think of "
+ "They grabbed a " + secondnoun.value + ". " ;
finishedstory += "With the " + secondnoun.value + "in hand. " + thename.value + adverb.value + "attacked the dragon.";
finishedstory += "The dragon became very confused and left. The End";
storyOutput.innerHTML = finishedstory;
}
function resetPage() {
}<!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>Finally, Enter an adverb here:
<input id="adverb" type="text" placeholder="adverb">
</p>
<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>