Wie starte ich diesen Javascript-Code auf klicken

Question

EDITED: Ok, ich habe nicht gut erklären. Ich habe eine Schaltfläche im HTML hinzugefügt. Wenn Sie darauf klicken, wird eine Warnung angezeigt und der Benutzer aufgefordert, Fragen und Antworten einzugeben. ABER ... es bringt dieses Array nicht in die Karten selbst.

Ich habe zusammen ein einfaches Javascript-Flash-Karten-Programm gehackt. Aber es beginnt sofort beim Laden der Seite. Wie kann ich es auf einen Klick <button> starten? Ich habe versucht, den gesamten Code in eine Funktion einzuschließen, aber dann werden die Benutzereingaben, die das Array erzeugen, nicht an die Flashcards weitergegeben - ich nehme an, weil sie getrennte Funktionen sind. Ich werde das wahrscheinlich nicht gut erklären. Aber ich möchte, dass das gesamte Programm auf Knopfdruck läuft. Ich schätze jede Hilfe.

#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

Ich denke, die hier Problem ist, dass myIndex ein global ist. Wenn flashcards das erste Mal ausgeführt wird, erhöht es den Index auf die Länge des Arrays, sodass es beim nächsten Mal (im Click-Handler) bereits am Ende des Arrays steht. Setzen Sie es auf 0 am Anfang von flashcards.

Answer 2

Am Ende des Codes rufen Sie die JavaScript-Funktion auf, die dazu führt, dass Ihre Seite die erste Frage sofort lädt, nachdem der Benutzer alle Eingabeaufforderungen eingegeben hat. Entfernen Sie es und Ihre Anwendung ist gut zu gehen.

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>