如何点击

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运行时，它会将索引增加到数组的长度，因此下次运行时（在单击处理程序中）它已经在数组的末尾。在flashcards的开头将其设置为0。

Answer 2

在代码的最后，您调用flashCard() javascript函数，这会导致您的页面在用户输入所有提示输入后立即加载第一个问题。删除它，你的应用程序是好的。

Answer 3

var questionsAndAnswers = [];     

var myIndex = 0;



function showAllQuestionsAndAnswers() {
for (var i = 0; i < questionsAndAnswers.length; i++) {
    if(i % 2 == 0) {
      alert("Question: " + questionsAndAnswers[i]);
    }
    else {
        alert("Answer: " + questionsAndAnswers[i]);
    }
}
}
/*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'
];*/


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


function flashCards() {
for (var i = 0; i < 2; i++) {              // # of flash cards
  questionsAndAnswers.push(prompt('Enter question ' + (i+1))); // push the value into the array
  questionsAndAnswers.push(prompt('Enter answer ' + (i+1))); // push the value into the array
  

}
  var flashcardFront = document.getElementById('flashcardFront');
  flashcardFront.innerHTML = renderQuestion(myIndex);
  myIndex = (myIndex + 1) % (questionsAndAnswers.length);
}

function startGame() {
  flashCards();
}
document.getElementById("start_game").onclick = function() {startGame()};

#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>
    <button id="start_game">
    Start Game
    </button>
    <a id="flashcardFront" href="#" onclick="flashCards();"></a>
</div>