It's me again ...
Ich hab' in meinem Dokument eine Funktion geschrieben, die beim ersten Klick auf den Button die erste Frage aus meinem Array ausgibt, beim zweiten Klick die erste Antwort. Das klappt durch die Verschachtelung.
Aber dann müsste der Zähler um 1 erhöht werden, und das klappt nicht - der Zähler wird a) um 2 erhöht und b) wird nur die zweite der beiden verschachtelten Funktionen ausgeführt.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body {
font-family: sans-serif
}
button {
color: white;
background-color: dodgerblue;
border: none;
padding: 10px 20px;
font-weight: bold;
}
</style>
</head>
<body>
<button id="clicker">Zeige eine Frage, beim nächsten Klick die Antwort</button>
<br><br>
<div id="questionAnswers"></div>
<script>
'use strict'
const questionsAndAnswers = [
{ question: 'Was ist größer, Mücke oder Elefant?', answer: 'Elefant' },
{ question: 'Was ist kleiner, Elefant oder Mücke?', answer: 'Mücke' },
{ question: 'Was kann man aus einer Mücke machen?', answer: 'einen Elefanten' },
]
let counter = 0
document.getElementById('clicker').addEventListener('click', () => {
document.getElementById('questionAnswers').innerHTML = questionsAndAnswers[counter].question + ' <i>Counter: ' + counter + '</i>'
document.getElementById('clicker').addEventListener('click', () => {
document.getElementById('questionAnswers').innerHTML = questionsAndAnswers[counter].answer + ' <i>Counter: ' + counter + '</i>'
counter++
})
})
</script>
</body>
</html>Jetzt bin ich am Ende meines Lateins. Habe etliche Positionen für "counter++" ausprobiert, aber kein Ergebnis ist brauchbar.
Ist vielleicht mein gesamter Ansatz falsch? Wie geschrieben, ich möchte beim ersten Klick die erste Frage, beim zweiten Klick die erste Antwort, beim dritten Klick die zweite Frage ... und so weiter. Für eine Idee wäre ich dankbar.
