JS开发MadLib网站时数组未定义及读取异常问题求助

你遇到的madLibAnswers is not defined错误是因为从未声明并初始化这个数组，同时代码里还有几个关键问题需要修正：

1. 初始化madLibAnswers数组 #

在全局变量区域（currentLib变量下方）添加数组声明：

/* List that the answers save to */
let madLibAnswers = [];
/* Current madlib that the page is currently on */
var currentLib;
/* Number of words into the Madlib */

2. 修正循环条件 #

所有for循环的终止条件写反了，比如i > 12应该改成i < 12（对应zoo的12个输入），否则循环一次都不会执行。

3. 修正条件判断的赋值错误 #

if (currentLib = "selected=zoo")是赋值操作而非比较，会强制修改currentLib的值，应该用严格相等符===：

if (currentLib === "selected=zoo")

另外两个else if分支同理。

4. 修正模板字符串拼接错误 #

模板字符串里不需要额外的+ " " +，直接用${madLibAnswers[n]}插入变量即可，多余的加号会导致输出格式混乱。

修正后的关键代码片段 #

全局变量部分 #

/* List that the answers save to */
let madLibAnswers = [];
/* Current madlib that the page is currently on */
var currentLib;
/* Number of words into the Madlib */

// Zoo Madlib text
var madLibZooTypes = ["Adjective", "Noun", "Verb, Past tense", "Adverb", "Adjective", "Noun", "Noun", "Adjective", "Verb", "Adverb", "Verb Past tense", "Adjective"]
var madLibParkTypes = ["Adjective", "Plural Noun", "Noun", "Adverb", "Number", "Verb, Past Tense", "-est Adjective", "Verb, Past Tense", "Adverb", "Adjective"]
var madLibArcadeTypes = ["Plural Noun", "Plural Noun", "Verb", "Noun", "-ing Verb", "Plural Noun", "Noun", "Plural Noun"]

submitButtonOnClick函数修正 #

function submitButtonOnClick() {
    // 每次提交前清空数组，避免残留之前的输入
    madLibAnswers = [];

    if (currentLib === "selected=zoo") {
        for (let i = 0; i < 12; i++) {
            madLibAnswers[i] = document.getElementById('input' + i).value;
            console.log("madLibAnswers: ", madLibAnswers[i]);
        }
        document.getElementById('typeOfWord').innerHTML = `Today I went to the zoo. I saw a(n) ${madLibAnswers[0]} jumping up and down in its tree. He ${madLibAnswers[2]} ${madLibAnswers[3]} through the large tunnel that led to its ${madLibAnswers[4]} ${madLibAnswers[5]}. I got some peanuts and passed them through the cage to a gigantic gray ${madLibAnswers[6]} towering above my head. Feeding that animal made me hungry. I went to get a ${madLibAnswers[7]} scoop of ice cream. It filled my stomach. Afterwards I had to ${madLibAnswers[8]} ${madLibAnswers[9]} to catch our bus. When I got home I ${madLibAnswers[10]} my mom for a ${madLibAnswers[11]} day at the zoo.`;
    }
    else if (currentLib === "selected=park") {
        for (let i = 0; i < 10; i++) {
            madLibAnswers[i] = document.getElementById('input' + i).value;
            console.log("madLibAnswers: ", madLibAnswers[i]);
        }
        document.getElementById('typeOfWord').innerHTML = `Today, my fabulous camp group went to a (an) ${madLibAnswers[0]} amusement park. It was a fun park with lots of cool ${madLibAnswers[1]} and enjoyable play structures. When we got there, my kind counselor shouted loudly, 'Everybody off the' ${madLibAnswers[2]}. We all pushed out in a terrible hurry. My counselor handed out yellow tickets, and we scurried in. I was so excited! I couldn't figure out what exciting thing to do first. I saw a scary roller coaster I really liked so, I ${madLibAnswers[3]} ran over to get in the long line that had about ${madLibAnswers[4]} people in it. When I finally got on the roller coaster I was ${madLibAnswers[5]}. In fact I was so nervous my two knees were knocking together. This was the ${madLibAnswers[6]} ride I had ever been on! In about two minutes I heard the crank and grinding of the gears. That’s when the ride began! When I got to the bottom, I was a little ${madLibAnswers[7]} but I was proud of myself. The rest of the day went ${madLibAnswers[8]}. It was a(an) ${madLibAnswers[9]} day at the fun park.`;
    }
    else if (currentLib === "selected=arcade") {
        for (let i = 0; i < 8; i++) {
            madLibAnswers[i] = document.getElementById('input' + i).value;
            console.log("madLibAnswers: ", madLibAnswers[i]);
        }
        document.getElementById('typeOfWord').innerHTML = `When I go to the arcade with my ${madLibAnswers[0]} there are lots of games to play. I spend lots of time there with my friends. In the game X-Men you can be different ${madLibAnswers[1]}. The point of the game is to ${madLibAnswers[2]} every robot. You also need to save people. Then you can go to the next level. In the game Star Wars you are Luke Skywalker and you try to destroy every ${madLibAnswers[3]}. In a car racing/motorcycle racing game you need to beat every computerized vehicle that you are ${madLibAnswers[4]} against. There are a whole lot of other cool games. When you play some games you win ${madLibAnswers[5]} for certain scores. Once you're done you can cash in your tickets to get a big ${madLibAnswers[6]}. You can save your ${madLibAnswers[7]} for another time. When I went to this arcade I didn't believe how much fun it would be. So far I have had a lot of fun every time I've been to this great arcade!`;
    }
}

另外，madLibZooTypes里的拼写错误Adjevtive建议改成Adjective，保证用词规范。

内容的提问来源于stack exchange，提问作者RMof