【问题标题】:Why is my Javascript output for my Mad Lib blank? Possibly innerhtml issue为什么我的 Mad Lib 的 Javascript 输出为空白?可能是innerhtml问题
【发布时间】:2019-03-16 02:34:00
【问题描述】:

我确定这是一个简单的解决方法,但我看不出问题所在。我正在关注制作 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>

【问题讨论】:

  • 您当前遇到错误,因为finishedstory 不是函数,但您正在调用它;例如,finishedstory()。它实际上只是一个String,所以在你的completestory 函数中尝试storyOutput.innerHTML = finishedstory;
  • 非常感谢。我知道这很简单

标签: javascript html innerhtml


【解决方案1】:

由于completestory 函数中的这一行,您收到了错误Uncaught TypeError: finishedstory is not a function

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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2015-08-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-03-03
    • 2021-02-25
    相关资源
    最近更新 更多