javascript - Mad Libs javascript 代码无法正常工作

问题描述

我正在尝试创建一个 Madlibs 游戏，但我在将所有值插入到故事中时遇到了问题。我无法弄清楚我错过了什么。

这是我的 HTML 代码：

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Assignment 2 </title>
                <meta charset="utf-8">
                    <script src="js/jquery-3.4.1.js"></script>
                    <script src="js/assignment02.js"></script>


        </head>

            <body>

                <h1>The Wizard of Oz!</h1>
                    <p> <strong><span id="femaleName1"></span></strong> lived in the midst of the great <strong><span id="stateName"></span></strong> <strong><span id="geoFeature"></span></strong> , with Uncle <strong><span id="maleName"></span></strong> , who was a <strong><span id="jobName"></span></strong> , and Aunt <strong><span id="femaleName2"></span></strong>, who was the farmer's wife. Their house was small, for the lumber to build it had to be carried by wagon many miles. There were four walls, a floor and a roof, which made one room; and this room contained a rusty looking <strong><span id="noun1"></span></strong>, a <strong><span id="noun2"></span></strong> for the dishes, a table, three or four chairs, and the beds. Uncle <strong><span id="maleName"></span></strong> and Aunt <strong><span id="femaleName2"></span></strong> had a big bed in one corner, and <strong><span id="femaleName1"></span></strong>a little bed in another corner. There was no garret at all, and no cellar--except a small hole dug in the ground, called a cyclone cellar, where the family would go in case one of those great whirlwinds arose, mighty enough to crush any building in its path. It was reached by a trap door in the middle of the <strong><span id="noun3"></span></strong>, from which a ladder led down into the small, dark hole.

                    </p>

                    <p>When <strong><span id="femaleName1"></span></strong> stood in the doorway and looked around, she could see nothing but the great <strong><span id="colorName"></span></strong> <strong><span id="geoFeature"></span></strong> on every side. Not a <strong><span id="noun4"></span></strong> nor a <strong><span></span></strong> broke the broad sweep of flat country that reached to the edge of the sky in all directions. The sun had baked the plowed land into a <strong><span id="noun5"></span></strong> mass, with little cracks running through it. Even the grass was not green, for the sun had burned the tops of the long blades until they were the same <strong><span id="colorName"></span></strong> color to be seen everywhere. Once the house had been painted, but the sun blistered the paint and the rain washed it away, and now the house was as dull and <strong><span id="colorName"></span></strong> as everything else. 

                    </p>

            </body>
    </html>

我的 Javascript 是这样的：

 $(document).ready(function () {
        var femaleName1 = prompt("Please enter a female's first name (1 of 2)");
        var stateName = prompt("Please enter the name of a State");
        var geoFeature = prompt("Please enter a geographical feature");
        var maleName = prompt("Please enter a male's first name");
        var jobName = prompt("Please enter an occupation");
        var femaleName2 = prompt("Please enter another female's first name (2 of 2)");
        var noun1 = prompt("Please enter a noun (1 of 5)");
        var noun2 = prompt("Please enter a noun (2of 5)");
        var noun3 = prompt("Please enter a noun (3 of 5)");
        var colorName = prompt("Please enter a color");
        var noun4 = prompt("Please enter a noun (4 of 5)");
        var noun5 = prompt("Please enter a noun (5 of 5)");

            $("#femaleName1").text(femaleName1);
            $("#stateName").text(stateName);
            $("#geoFeature").text(geoFeature);
            $("#maleName").text(maleName);
            $("#jobName").text(jobName);
            $("#femaleName2").text(femaleName2);
            $("#noun1").text(noun1);
            $("#noun2").text(noun2);
            $("#noun3").text(noun3);
            $("#colorName").text(colorName);
            $("#noun4").text(noun4);
            $("#noun5").text(noun5);
});

我遇到的问题不是所有的值都被插入到故事中。比如“三四把椅子，还有床”之后。男性和女性2的价值没有出现。总共应该有 20 个输入，但只有 12 个显示。我在这里想念什么？

标签： javascriptjqueryhtml

javascript - Mad Libs javascript 代码无法正常工作

问题描述

解决方案

推荐阅读