Hallo zusammen,
ich versuche gerade, Javascript zu lernen, aber es fällt mir nicht leicht. Manchmal, so wie jetzt, gerate ich an Grenzen, über die ich mich nicht mehr hinaus googeln kann.
Ich habe ein kleines Script geschrieben und in eine HTML-Seite eingebunden:
Ergebnis sind drei Paragrafen mit den drei Objekten des Arrays, soweit alles gut. Nun würde ich aber gern nur eine einzige Zeile dieser drei Zeilen ausgeben. Hintergrund ist, dass ich später eine Funktion erstellen möchte, mit der man sich durch die einzelnen Fragen klicken kann.
Es gelingt mir nicht, eine einzige gewünschte Zeile auszugeben. Bin ich mit der Schleife vielleicht auf dem Holzweg? Für Tipps wäre ich dankbar.
Code
<!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;
font-size: 1.5rem;
padding-top: 2rem;
}
main {
max-width: 70vw;
margin: 0 auto;
text-align: center;
}
button {
color: white;
background:dodgerblue;
border: none;
margin: 0 auto 2rem;
padding: 10px 20px;
font-size: 1.5rem;
font-weight: bold;
min-width: 150px;
cursor: pointer;
display: block;
}
.blink {
animation: blink 1.5s infinite;
}
@keyframes blink {
0%,35% {
background: orangered;
}
36%,64% {
background: crimson
}
65%,100%{
background: orangered;
}
}
#lastwords {
color: #fff;
background: rgb(121, 175, 175);
padding: .5rem 1rem;
font-size: 1rem;
line-height: 1.75rem;
text-align: center;
display: inline-block;
opacity: 0;
}
.morecolor {
opacity: 1 !important;
transition: opacity 5s;
}
.lesscolor {
opacity: 0 !important;
transition: opacity 5s;
}
.frage{
background:teal;
}
</style>
</head>
<body>
<main>
<div id="questionAnswers"></div>
<button id="clicker" class="blink">Start</button>
<p id="lastwords">Das war's schon!<br>Noch mal?<br>Bitte Button drücken!</p>
</main>
<script>
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' },
{ question: 'Kann man aus einem Elefanten eine Mücke machen?', answer: 'Prinzipiell ja, aber es wird nicht gern gesehen.' },
];
counter=0;
// Mit der folgenden Zeile wird der Eventlistener registriert:
document.getElementById('clicker').addEventListener('click', () => {
// Ab hier beginnt das Innere der anonymen Funktion. Hier gelangt man erst hin wenn das Event feuert
// und die Funktion aufgerufen wird, beim Laden der Seite jedoch noch nicht. Setze auf die folgende
// Zeile einen Haltpunkt, dann kannst Du dich davon überzeugen.
if (status === 'showQuestion') {
document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].question + '</p>';
status = 'showAnswer';
document.getElementById('clicker').classList.remove('blink');
document.getElementById('clicker').style.backgroundColor = 'dodgerblue';
document.getElementById('lastwords').classList.remove('morecolor');
document.getElementById('questionAnswers').classList.remove('hidden');
document.getElementById('questionAnswers').classList.remove('lesscolor');
let question = 'zur ' + (counter + 1) + '. Antwort';
document.getElementById('clicker').innerHTML = question;
}
else {
document.getElementById('questionAnswers').innerHTML = '<p>' + questionsAndAnswers[counter].answer + '</p>';
status = 'showQuestion';
document.getElementById('clicker').style.backgroundColor = 'teal';
let answer = 'zur ' + (counter + 2) + '. Frage';
document.getElementById('clicker').innerHTML = answer;
counter++;
if (counter === questionsAndAnswers.length && status === 'showQuestion') {
counter = 0;
document.getElementById('clicker').innerHTML = 'Ende!';
function myTimeout1() {
document.getElementById('lastwords').style.display = 'inline-block';
}
function myTimeout2() {
document.getElementById('lastwords').classList.add('morecolor');
document.getElementById('questionAnswers').classList.add('lesscolor');
}
function myTimeout3() {
document.getElementById('clicker').innerHTML = again;
}
function myTimeout4() {
document.getElementById('clicker').style.backgroundColor = 'none';
document.getElementById('clicker').classList.add('blink');
}
const sequence = [
{
// Die Zeit, um die der Aufruf der Funktion (callback)
// verzögert werden soll:
delay: 50,
// Die Funktion, die aufgerufen werden soll:
callback: myTimeout1
},
{ delay: 500, callback: myTimeout2 },
{ delay: 3000, callback: myTimeout3 },
{ delay: 1500, callback: myTimeout4 },
];
// Bearbeitet jeweils einen Eintrag im Array sequence:
function doIt() {
// Die aktuelle Aktion wird nach der gewünschten Verzögerung ausgeführt:
timer = setTimeout(() => {
// Die Funktion aufrufen, die im aktuellen Datensatz in dem Array
// sequence als callback eingetragen ist, z. B. myTimeout2
// beim zweiten Datensatz:
sequence[idx].callback();
// Index für das Array sequence erhöhen:
idx++;
// Sind wir noch nicht am Ende des Arrays sequence angelangt?
if (idx < sequence.length) {
// Den aktuellen Eintrag im Array (nach Erhöhen des Index)
// bearbeiten:
doIt();
console.log(timer)
}
}, sequence[idx].delay)
// Der zweite Parameter beim Aufruf der Funktion setTimeout ist die Verzögerungszeit.
// Diese ist im Array sequence unter delay eingetragen, z. B. 500
// beim zweiten Datensatz.
}
let
// Wir beginnen mit dem ersten Datensatz in sequence,
// also den Index auf 0 setzen:
idx = 0,
// Timervariable, hier wird die ID des aktuellen Timers
// gespeichert, wir brauchen sie, um den Timer abbrechen zu können:
timer;
// Jetzt beginnen wir die Sequenz durch den Aufruf der Funktion doIt:
doIt();
document.getElementById('clicker').addEventListener('click', () => {
if (timer) {
clearTimeout(timer);
}
});
}
}
}); // Hier ist jetzt das Registrieren des Eventlisteners beendet und wenn
// weitere Anweisungen vorhanden wären, würde der Debugger beim Stepping
// dort wieder anhalten.
</script>
</html>