我正在制作抽认卡游戏，但“下一步”按钮不起作用

Question

我正在制作“下一步”按钮以移至此游戏中的下一张抽认卡，但是当我单击该按钮时，什么也没有发生。我不知道我做错了什么。

我在这段代码中使用了很多变量，例如数字变量来说明它是哪个问题和答案。我尝试每次向 number 变量添加一个，以将其更改为下一个问题，但它不起作用。

    <div id="flashcard" onclick="flip()"><h1 id="word"></h1></div>

<br>

<button onlick="next()">Next</button>

<script>

var questions;

questions = ['artistic','daring','good','sports-minded','messy','disorganized','studious','funny','impacient','intelligent','neat','patient','lazy','shy','serious','nice','sociable','talented','hardworking','boy','girl','male friend','female friend','I','he','she','very','according to my family'];

var answers = ['artístico, artística','atrevido','bueno, buena','deportista','desordenado, desordenada','estudioso, estudiosa','gracioso, graciosa','impaciente','intelligente','ordenado, ordenada','paciente','perezoso, perezosa','reservado, reservada','serio, seria','simpático, simpática','sociable','talentoso, talentosa','trabajador, trabajadora','el chico','la chica','el amigo','la amiga','yo','él','ella','muy','según mi familia'];

var number = 0;

var answer = answers[number];

var word = questions[number];

var display = document.getElementById('word');

display.innerHTML = word;

function flip(){

if(word == questions[0]){

display.innerHTML = answer;

}

if (word == questions[1]){

display.innerHTML = answer;

}

if (word == questions[2]){

display.innerHTML = answer;

}

if (word == questions[3]){

display.innerHTML = answer;

}

if (word == questions[4]){

display.innerHTML = answer;

}

if (word == questions[5]){

display.innerHTML = answer;

}

if (word == questions[6]){

display.innerHTML = answer;

}

if (word == questions[7]){

display.innerHTML = answer;

}

if (word == questions[8]){

display.innerHTML = answer;

}

if (word == questions[9]){

display.innerHTML = answer;

}

if (word == questions[10]){

display.innerHTML = answer;

}

if (word == questions[11]){

display.innerHTML = answer;

}

if (word == questions[12]){

display.innerHTML = answer;

}

if (word == questions[13]){

display.innerHTML = answer;

}

我想要发生的是当用户单击“下一步”按钮时，它会更改为下一个闪存卡。

Answer 1

如果使用变量来访问数组中的数据，则可以大大简化代码 - 您不必对代码中的每个索引进行硬编码。我想你希望你的代码像这样工作：var questions;questions = ['artistic', 'daring', 'good', 'sports-minded', 'messy', 'disorganized', 'studious', 'funny', 'impacient', 'intelligent', 'neat', 'patient', 'lazy', 'shy', 'serious', 'nice', 'sociable', 'talented', 'hardworking', 'boy', 'girl', 'male friend', 'female friend', 'I', 'he', 'she', 'very', 'according to my family'];var answers = ['artístico, artística', 'atrevido', 'bueno, buena', 'deportista', 'desordenado, desordenada', 'estudioso, estudiosa', 'gracioso, graciosa', 'impaciente', 'intelligente', 'ordenado, ordenada', 'paciente', 'perezoso, perezosa', 'reservado, reservada', 'serio, seria', 'simpático, simpática', 'sociable', 'talentoso, talentosa', 'trabajador, trabajadora', 'el chico', 'la chica', 'el amigo', 'la amiga', 'yo', 'él', 'ella', 'muy', 'según mi familia'];//Your code doesnt have to check every single index, just use a variablevar display = document.getElementById('word');var next = document.getElementById('next');let i = 0;function flip(idx) {&nbsp; display.innerHTML = answers[idx];&nbsp; if (i < answers.length - 1) {&nbsp; &nbsp; //Increment the counter by 1 on each flip&nbsp; &nbsp; i += 1;&nbsp; } else {&nbsp; &nbsp; //Back to first card&nbsp; &nbsp; i = 0;&nbsp; }}//Flip the first card right awayflip(0);//Add an event handler to the button to call flip when the button is clickednext.addEventListener('click', () => {&nbsp; flip(i);});<input type="button" id="next" value="Next"><div id="word"></div>