Question

所以基本上我有3个文件，一个是HTML，第二个是CSS，第三个是JavaScript。这应该用我输入的元素创建一个故事。

function tellStory(){	
    var txtBfn = document.getElementById("txtBfn");
    var txtDogn = document.getElementById("txtDogn");
    var txtVerb1 = document.getElementById("txtVerb1");
    var txtVerb2 = document.getElementById("txtVerb2");
    var txtFood = document.getElementById("txtFood");
    var txtAdjective = document.getElementById("txtAdjective");
    var txtPlace = document.getElementById("txtPlace");
    var txtTime = document.getElementById("txtTime");
    var output = document.getElementById("output");

    var Bfn = txtBfn.value;
    var Dogn = txtDogn.value;
    var Verb1 = txtVerb1.value;
    var Verb2 = txtVerb2.value;
    var Food = txtFood.value;
    var Adjective = txtAdjective.value;
    var Place = txtPlace.value;
    var Time = txtTime.value;


    var Story = "It was a " + Time + ", and little " + Bfn;
    story += "was going on a trip to " + Place + ". He took a " + Food + " to get there. ";
    story += Bfn + "'s " + Adjective + " dog started to " + Verb1 + " while";
    story += Bfn + " cried and " + Verb2 + ".";
    story += "It was all a trap,  now they have to evacuate the " + Place;

    output.innerHTML = story;
}

h1 {
  text-align: center;
}

fieldset {
  width: 600px;
  margin-left: auto;
  margin-right: auto;  
}

label {
  float: left;
  width: 250px;
  clear: left;
  text-align: right;
  padding-right: 1em;
}

input {
  float: center;
}

button {
  display: block;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

output {
  font-size: 150%;
  text-align: center;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>MadLibs.html</title>
  <link rel = "designsheet"
      type = "text/css"
      href = "Story.css" />
    <script type="text/javascript"
            src = "Storyjs.js">

  </script>
</head>
<body>
    <h1>Mad Story!</h1>
    <form action="">
        <fieldset>
            <p>
      <label for = "txtBfn">Your bestfriend's name</label>
            <input type = "text"
                   id = "txtBfn" />
      </p>
      <p>
            <label for = "txtDogn">Your dog's name</label>
            <input type = "text"
                   id = "txtDogn" />
            </p>
      <p>
            <label for = "txtVerb1">Verb</label>
            <input type = "text"
                   id = "txtVerb1" />
            </p>
      <p>
            <label for = "txtVerb2">Verb</label>
            <input type = "text"
                   id = "txtVerb2" />
            </p>
      <p>    
            <label for = "txtFood">Food</label>
            <input type = "text"
                   id = "txtFood" />
            </p>
      <p>
            <label for = "txtAdjective">Adjective</label>
            <input type = "text"
                   id = "txtAdjective" />
            </p>
      <p>	
            <label for = "txtPlace">Place</label>
            <input type = "text"
                   id = "txtPlace" />
            </p>
      <p>
            <label for = "txtTime">Time of the day</label>
            <input type = "text"
                   id = "txtTime" />
            </p>    
            <button onclick = "Story()"
                    type = "button">
                Tell the Story!
            </button>
            <button type = "Reset"
          value="Reset">
          Reset
      </button>

        </fieldset>
    </form>

    <div id = "story">

    </div>
</body>
</html>

我无法让它运行，请告诉我我在哪里做错了。我不知道这些变量的错误方式是否有问题。

Answer 1

你有错误的音调，这是一个有效的固定版本：

＆＃13;

function tellStory(){   
        var txtBfn = document.getElementById("txtBfn");
        var txtDogn = document.getElementById("txtDogn");
        var txtVerb1 = document.getElementById("txtVerb1");
        var txtVerb2 = document.getElementById("txtVerb2");
        var txtFood = document.getElementById("txtFood");
        var txtAdjective = document.getElementById("txtAdjective");
        var txtPlace = document.getElementById("txtPlace");
        var txtTime = document.getElementById("txtTime");
        var output = document.getElementById("story");

        var Bfn = txtBfn.value;
        var Dogn = txtDogn.value;
        var Verb1 = txtVerb1.value;
        var Verb2 = txtVerb2.value;
        var Food = txtFood.value;
        var Adjective = txtAdjective.value;
        var Place = txtPlace.value;
        var Time = txtTime.value;


        var story = "It was a " + Time + ", and little " + Bfn;
        story += "was going on a trip to " + Place + ". He took a " + Food + " to get there. ";
        story += Bfn + "'s " + Adjective + " dog started to " + Verb1 + " while";
        story += Bfn + " cried and " + Verb2 + ".";
        story += "It was all a trap,  now they have to evacuate the " + Place;

    output.innerHTML = story;
}

＆＃13;

h1 {
  text-align: center;
}

fieldset {
  width: 600px;
  margin-left: auto;
  margin-right: auto;  
}

label {
  float: left;
  width: 250px;
  clear: left;
  text-align: right;
  padding-right: 1em;
}

input {
  float: center;
}

button {
  display: block;
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

output {
  font-size: 150%;
  text-align: center;
  width: 400px;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>MadLibs.html</title>
        <link rel = "stylesheet"
              type = "text/css"
              href = "Story.css" />
        <script type="text/javascript"
                src = "Storyjs.js">

        </script>
    </head>
    <body>
        <h1>Mad Story!</h1>
        <form action="">
            <fieldset>
                <p>
                <label for = "txtBfn">Your bestfriend's name</label>
                <input type = "text"
                       id = "txtBfn" />
                </p>
                <p>
                <label for = "txtDogn">Your dog's name</label>
                <input type = "text"
                       id = "txtDogn" />
                </p>
                <p>
                <label for = "txtVerb1">Verb</label>
                <input type = "text"
                       id = "txtVerb1" />
                </p>
                <p>
                <label for = "txtVerb2">Verb</label>
                <input type = "text"
                       id = "txtVerb2" />
                </p>
                <p>    
                <label for = "txtFood">Food</label>
                <input type = "text"
                       id = "txtFood" />
                </p>
                <p>
                <label for = "txtAdjective">Adjective</label>
                <input type = "text"
                       id = "txtAdjective" />
                </p>
                <p> 
                <label for = "txtPlace">Place</label>
                <input type = "text"
                       id = "txtPlace" />
                </p>
                <p>
                <label for = "txtTime">Time of the day</label>
                <input type = "text"
                       id = "txtTime" />
                </p>    
                <button onclick = "tellStory()"
                        type = "button">
                    Tell the Story!
                </button>
                <button type = "Reset"
                        value="Reset">
                        Reset
                </button>

            </fieldset>
        </form>

        <div id = "story">

        </div>
    </body>
    </html>

＆＃13;

HTML5运行不正确，我的代码中出现错误？

1 个答案: