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

Mad Libs javascript代码无法正常工作

javascript jquery html

Mad Libs javascript代码无法正常工作,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试创建一个Madlibs游戏，但是我在故事中插入的所有值都有问题。我不知道我错过了什么以下是我的HTML代码： <!DOCTYPE html> <html lang="en"> <head> <title>Assignment 2 </title> <meta charset="utf-8"> &

我正在尝试创建一个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>

我遇到的问题是，并不是所有的值都被插入到故事中。例如，在“三张或四张椅子和床”之后，男性和女性2的值不会显示出来。总共应该有20个输入，但只有12个显示。我在这里遗漏了什么？

一个id在HTML中应该是唯一的，如果您不想选择多个元素，您应该使用类或

我举了一个例子，两个人都在这里工作

Hi Scotty，在这个例子中你只有12个提示？其他8个在哪里？

 $(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);
});