我正在制作抽認卡游戲，但“下一步”按鈕不起作用

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;
}
if (word == questions[14]){
display.innerHTML = answer;
}
if (word == questions[15]){
display.innerHTML = answer;
}
if (word == questions[16]){
display.innerHTML = answer;
}
if (word == questions[17]){
display.innerHTML = answer;
}
if (word == questions[18]){
display.innerHTML = answer;
}
if (word == questions[19]){
display.innerHTML = answer;
}
if (word == questions[20]){
display.innerHTML = answer;
}
if (word == questions[21]){
display.innerHTML = answer;
}
if (word == questions[22]){
display.innerHTML = answer;
}
if (word == questions[23]){
display.innerHTML = answer;
}
if (word == questions[24]){
display.innerHTML = answer;
}
if (word == questions[25]){
display.innerHTML = answer;
}
if (word == questions[26]){
display.innerHTML = answer;
}
}
function next(){
number = number + 1;
display.innerHTML = word;
} //this is the function I need help on.
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Patrick+Hand+SC&display=swap');
#flashcard{
width:400;
height:250;
background:#fff555;
position:relative;
}
#word{
position:absolute;
transform:translate(-50%,-50%);
top:110px;
left:50%;
font-family: 'Patrick Hand SC', cursive;
}
</style>

我想要發生的是當用戶單擊“下一步”按鈕時，它會更改為下一個閃存卡。

Answer 1

該函數可能如下所示。 順便說一句，你在onlick="next()"有一個錯字

 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; } if (word == questions[14]) { display.innerHTML = answer; } if (word == questions[15]) { display.innerHTML = answer; } if (word == questions[16]) { display.innerHTML = answer; } if (word == questions[17]) { display.innerHTML = answer; } if (word == questions[18]) { display.innerHTML = answer; } if (word == questions[19]) { display.innerHTML = answer; } if (word == questions[20]) { display.innerHTML = answer; } if (word == questions[21]) { display.innerHTML = answer; } if (word == questions[22]) { display.innerHTML = answer; } if (word == questions[23]) { display.innerHTML = answer; } if (word == questions[24]) { display.innerHTML = answer; } if (word == questions[25]) { display.innerHTML = answer; } if (word == questions[26]) { display.innerHTML = answer; } } function next() { number++; answer = answers[number]; word = questions[number]; display.innerHTML = word; } //this is the function I need help on.

 @import url('https://fonts.googleapis.com/css?family=Patrick+Hand+SC&display=swap'); #flashcard{ width:400; height:250; background:#fff555; position:relative; } #word{ position:absolute; transform:translate(-50%,-50%); top:110px; left:50%; font-family: 'Patrick Hand SC', cursive; }

 <div id="flashcard" onclick="flip()"><h1 id="word"></h1></div> <br> <button onclick="next()">Next</button>

Answer 2

如果使用變量來訪問數組中的數據，則可以大大簡化代碼 - 您不必對代碼中的每個索引進行硬編碼。 我想你希望你的代碼像這樣工作：

 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 variable var display = document.getElementById('word'); var next = document.getElementById('next'); let i = 0; function flip(idx) { display.innerHTML = answers[idx]; if (i < answers.length - 1) { //Increment the counter by 1 on each flip i += 1; } else { //Back to first card i = 0; } } //Flip the first card right away flip(0); //Add an event handler to the button to call flip when the button is clicked next.addEventListener('click', () => { flip(i); });

 <input type="button" id="next" value="Next"> <div id="word"></div>