javascript - 如何在单击时启动此 javascript 代码

Question

编辑:好的，我没有解释清楚。我在 HTML 中添加了一个按钮。当您单击该按钮时，它会发出警报并要求用户输入问题和答案。但是...它不会将该数组插入卡本身。

我编写了一个简单的 javascript 闪存卡程序。但它会在页面加载时立即启动。如何让它在单击一个<button>时启动？我尝试将整个代码包含在一个函数中，但创建数组的用户输入不会传递到抽认卡 - 我认为因为它们是单独的函数。我可能没有很好地解释这一点。但我希望整个程序只需单击一个按钮即可运行。我感谢任何帮助。

#flashcardFront {
    margin-top: 100px;
    margin-left: 400px;
    width: 300px;
    height: 50px;
    background-color: black;
    color: white;
    font-family: arial;
    font-size: 22px;
    text-align: center;
    padding: 50px 0;
    display: block;
}

a:link {
    text-decoration: none;
}

#number {
    color: red;
    position: relative;
    left: -120px;
    top: 30px;
}

<div>
    <button onclick='cards();'>button</button>
    <a id="flashcardFront" href="#" onclick="flashCards();"></a>
</div>    

var myArray = [];                               

for (var i = 0; i < 2; i++) {              // # of loops 
  myArray.push(prompt('Enter question ' + (i+1))); // push the value into the array
  myArray.push(prompt('Enter answer ' + (i+1))); // push the value into the array
}
/*var myArray = [
  "Q: What's my name?", 'A: Heck no.',
  'Q: My age?', "A: Cool kids don't say.",
  'Q: Fave rocker?', 'A: Paul Gilbert'
];*/
var myIndex = 0;

function renderQuestion(index) {
  // render number if index is even
  var str = myArray[index]
  if (index % 2 == 0) {
    str += '<br><span class="question-number">' + (index / 2 + 1) + '</span>'
  }
  return str
}

function flashCards() {
  var flashcardFront = document.getElementById('flashcardFront');
  flashcardFront.innerHTML = renderQuestion(myIndex);
  myIndex = (myIndex + 1) % (myArray.length);
}

flashCards()

Answer 1

我认为这里的问题是 myIndex 是全局的。 flashcards 第一次运行时，会将索引递增到数组的长度，因此下次运行时(在点击处理程序中)，它已经位于数组的末尾。在抽认卡开头将其设置为 0。