带有javascript的madlibs生成器网页

我只想使用1个输入栏循环浏览不同的提示，要求用户输入名词、动词、形容词等。我希望每次用户按下“回车”键时都能循环浏览。最后，我希望整个madlib段落在底部打印出来，并带有存储的用户输入值。我认为使用数组存储用户输入值是正确的。。我卡住了。我这样做对吗

这里是HTML和CSS的完整代码笔（查看我的简单概念）：

let prompt=document.getElementById（'prompt'）；
让输入=document.getElementById（'userinput'）；
设madlib=document.getElementById（'madlib段落'）；
input.addEventListener（“键控”，提交（事件））；
input.addEventListener（“键控”，重置输入）；
input.addEventListener（“键控”，更改提示）；
功能提交（事件）{
如果（event.keyCode===13）{
event.preventDefault（）；
}
}
函数resetInput（）{
input.value=”“//清除输入
}
函数changePrompt（）{
让word=新数组（）；
字[0]=“位置：”
单词[1]=“有生命的东西：”
word[2]=“名称：”
单词[3]=“一种食物：”
单词[4]=“一个名词：”
单词[5]=“动词：”
字[6]=“一种颜色：”
单词[7]=“复数名词：”
单词[8]=“声音：”
对于（i=0；i<10；i++）{
prompt.innerHTML=word[i]；
字[i]=输入值
};
}
//var location=“位置：”
//var livingThing=“有生命的东西：”
//var name=“名称：”
//var food=“一种食物：”
//var noun=“一个名词：”
//var verb=“动词：”
//var color=“a颜色：”
//var pluralNoun=“复数名词：”
//var sound=“声音：”
//let words=[位置、生活、姓名、食物、名词、动词、颜色、复数名词、声音]
让madib.innerHTML=“从前一个时间在”++的时候，有一个“++的时候，有一个名为“+++的UUUUUUUUUUUUUUUUUUU++”，让madib.InneHTML=“从前的一个时间在”++的时候，有一个“++的时候，有一个”名为“+++的UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU+的，”，”的，”的，”的。有一个”的。有一次，有一次，有一次，有一次，有一次，有一个名为“名为一个名为“名为“+，名为”的。有一个名为。有一个名为。有uuuuuuuuuuuuuuuuuu+“彩色的“++”，你可以听到远处的“+”；

我自己解决并完成了它，它没有bug！在eventListener按键事件期间，我很难使用for循环而不是if语句，以及fadein类型的函数。请随意播放它！在这个代码笔中：

$（文档）.ready（函数（）{
让prompt=document.getElementById（'prompt'）；
让输入=document.getElementById（'userinput'）；
设madlib=document.getElementById（'madlib段落'）；
函数resetInput（）{
input.value=''//以清除输入
}
input.addEventListener（“键控”，函数（事件）{
如果（event.keyCode===13）{
event.preventDefault（）；
prompt.style.opacity=0；
storeAnswer（）；
重置输入（）；
设置超时（fadein，500）；
函数fadein（）{
prompt.style.opacity=1；
changePrompt（）；
}
}
});
让word=新数组（）；
单词[0]=“有生命的东西：”
word[1]=“名称：”
单词[2]=“一种食物：”
单词[3]=“一个名词：”
单词[4]=“动词：”
字[5]=“一种颜色：”
单词[6]=“复数名词：”
单词[7]=“声音：”
word[8]=“阅读下面的madlib！”
变量i=0
函数changePrompt（）{
如果（i<9）{
控制台日志（i）；
prompt.innerHTML=word[i]；
控制台日志（应答）；
我++
}
如果（i==9）{
madlib.innerHTML=“从前在“+答案[0].toUpperCase（）.bold（）+”中，有一个“+答案[1].toUpperCase（）.bold（）+”命名为“+答案[2].toUpperCase（）.bold（）+”。2020年，世界被冠状病毒袭击，没有“+答案[3].toUpperCase（）.bold（）+”可以吃了。“+答案[2].toUpperCase（）.bold（）+”出去找“+答案[4].toUpperCase（）.bold（）+”发现每个人都是“+答案[5].toUpperCase（）.bold（）+”。那里有“+答案[6].toUpperCase（）+”彩色“+答案[7].toUpperCase（）.bold（）+”，你可以听到“+答案[8].toUpperCase（）.bold（）+”在远处。”；
}
}
函数storeAnswer（）{
对于（var a=0；a<9；a++）{
答案[i]=输入值；
}
}
让answer=新数组（）；
答案[0]=“”
答案[1]=“”
答案[2]=“”
答案[3]=“”
答案[4]=“”
答案[5]=“”
答案[6]=“”
答案[7]=“”
答案[8]=“”

}))

let prompt = document.getElementById('prompt');
let input = document.getElementById('userinput');
let madlib = document.getElementById('madlibparagraph');

input.addEventListener("keyup", submit(event));
input.addEventListener("keyup", resetInput);
input.addEventListener("keyup", changePrompt);

function submit(event) {
  if (event.keyCode === 13) {
    event.preventDefault();

  }
}


function resetInput() {
  input.value = "" // to clear the input
}


function changePrompt() {
  let word = new Array();

  word[0] = "a location: "
  word[1] = "a living thing: "
  word[2] = "a name: "
  word[3] = "a kind of food: "
  word[4] = "a noun: "
  word[5] = "a verb: "
  word[6] = "a color: "
  word[7] = "a plural noun: "
  word[8] = "a sound: "

  for (i = 0; i < 10; i++) {
    prompt.innerHTML = word[i];
    word[i] = input.value
  };
}



// var location = "a location: "
// var livingThing = "a living thing: "
// var name = "a name: "
// var food = "a kind of food: "
// var noun = "a noun: "
// var verb = "a verb: "
// var color = "a color: "
// var pluralNoun = "a plural noun: "
// var sound = "a sound: "

// let words = [location, livingThing, name, food, noun, verb, color, pluralNoun, sound]




let madib.innerHTML = "Once upon a time in " + _______ + ", there was a " + _______ + " named " + _________ + ". The world was stricken by coronavirus in the year 2020 and there was no " + ________ + " to eat anymore. " + ________ + " went outside to find " + _________ + " and realized everyone was " + ________ + ". There were " + ________ + " colored " + __________ + " and you could hear " + ___________ + " in the distance.";

$(document).ready(function() {
let prompt = document.getElementById('prompt');
let input = document.getElementById('userinput');
let madlib = document.getElementById('madlibparagraph');

function resetInput() {
  input.value = '' // to clear the input
}

input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
      event.preventDefault();
      prompt.style.opacity = 0;
      storeAnswer();
      resetInput();
      setTimeout(fadein, 500);
      function fadein() {
          prompt.style.opacity = 1;
          changePrompt();
      }
  }
});

let word = new Array();
    word[0] = "a living thing: "
    word[1] = "a name: "
    word[2] = "a kind of food: "
    word[3] = "a noun: "
    word[4] = "a verb: "
    word[5] = "a color: "
    word[6] = "a plural noun: "
    word[7] = "a sound: "
    word[8] = "Read your madlib below!"


var i = 0
function changePrompt() {
    if (i < 9) {
      console.log(i);
      prompt.innerHTML = word[i];
      console.log(answer);
      i++
    }
    if (i === 9) {
      madlib.innerHTML = "Once upon a time in " + answer[0].toUpperCase().bold() + ", there was a " + answer[1].toUpperCase().bold() + " named " + answer[2].toUpperCase().bold() + ". The world was stricken by coronavirus in the year 2020 and there was no " + answer[3].toUpperCase().bold() + " to eat anymore. " + answer[2].toUpperCase().bold() + " went outside to find " + answer[4].toUpperCase().bold() + " and realized everyone was " + answer[5].toUpperCase().bold() + ". There were " + answer[6].toUpperCase() + " colored " + answer[7].toUpperCase().bold() + " and you could hear " + answer[8].toUpperCase().bold() + " in the distance.";
    }
}

function storeAnswer() {
  for (var a = 0; a < 9; a++) {
    answer[i] = input.value;
  }
}


let answer = new Array();
    answer[0] = ""
    answer[1] = ""
    answer[2] = ""
    answer[3] = ""
    answer[4] = ""
    answer[5] = ""
    answer[6] = ""
    answer[7] = ""
    answer[8] = ""