Hallo domeetr , willkommen zurück!
Hier hilft eine Erinnerung an die Schulzeit: v=s/t Die Geschwindigkeit v soll konstant sein, der Weg s ist die Breite des Elementes, das bewegt wird. Und die Zeit t ist zu ermitteln. Umgestellt t=s/v d. h. Du dividierst die Breite des Elementes, diese kannst Du durch getBoundingClientRect() ermitteln, durch eine Konstante. Auf die Weise erhältst Du die Zeit bzw. die Dauer der Animation.
Etwas mehr als ein, zwei Zeilen Code sind es schon. Ersetze das Javascript durch dieses und versuche anhand meiner Kommentare zu verstehen, wie es funktioniert:
<script>
const
// Tabellenzeilen bereit stellen:
rows = document.querySelectorAll('table tr'),
// Eingegebene Wert aus dem Localstorage lesen:
valuesJson = localStorage.getItem('values');
//Waren schon Werte im Localstorage?
if (valuesJson) {
const
values = JSON.parse(valuesJson);
// Über alle Tabellenzeilen:
for (let i = 0; i < rows.length; i++) {
// Den Wert aus dem Localstorage in das Eingabefeld eintragen:
rows[i].querySelector('td.eingabe input').value = values[i];
// Ergebnis berechnen und in Tabellenzelle eintragen:
const
faktor = rows[i].querySelector('td.faktor').textContent,
ausgabe = rows[i].querySelector('td.ausgabe'),
ergebnis = values[i] * faktor;
ausgabe.textContent = ergebnis;
}
}
// Eventlistener für input-Event irgendwo auf der
// Seite registrieren:
document.addEventListener('input', event => {
// Handelt es sich um das Eingabefeld in der Tabelle?
if (event.target.matches('td.eingabe input')) {
const
// Ausgehend vom Eingabefeld die Zeile
// in der Tabelle ermitteln:
row = event.target.closest('tr'),
// Den Faktor ermitteln:
faktor = row.querySelector('td.faktor').textContent,
// Die Tabellenzelle für die Ausgabe ermitteln:
ausgabe = row.querySelector('td.ausgabe'),
// Den eingegebenen Wert bereit stellen:
eingabe = event.target.value,
// Das Ergebnis berechnen:
ergebnis = eingabe * faktor;
// Das Ergebnis in die Tabellenzelle eintragen:
ausgabe.textContent = ergebnis;
// Ein Array mit den Eingaben bereit stellen:
const
values = [];
// Über alle Tabellenzeilen:
rows.forEach(row => {
// Den eingegebenen Wert in das Array eintragen:
const
eingabe = row.querySelector('td.eingabe input').value;
values.push(eingabe);
// Und das Array im Localstorage speichern:
localStorage.setItem('values', JSON.stringify(values));
});
}
});
</script>Du kannst die eingegebenen Zahlen im Localstorage speichern siehe hier:
So etwas ist eine Standardaufgabe, die relativ häufig vorkommt.
Statte deine Tabelle so mit Klassen aus:
<tr>
<td class="faktor">1</td>
<td class="eingabe"><input></td>
<td class="ausgabe"></td>
</tr>
<tr>
<td class="faktor">2</td>
<td class="eingabe"><input></td>
<td class="ausgabe"></td>
</tr>
<tr>
<td class="faktor">3</td>
<td class="eingabe"><input></td>
<td class="ausgabe"></td>
</tr>Und setze dieses Javascript an das Ende des Body, vor das schließende </body>:
<script>
// Eventlistener für input-Event irgendwo auf der
// Seite registrieren:
document.addEventListener('input', event => {
// Handelt es sich um das Eingabefeld in der Tabelle?
if (event.target.matches('td.eingabe input')) {
const
// Ausgehend vom Eingabefeld die Zeile
// in der Tabelle ermitteln:
row = event.target.closest('tr'),
// Den Faktor ermitteln:
faktor = row.querySelector('td.faktor').textContent,
// Die Tabellenzelle für die Ausgabe ermitteln:
ausgabe = row.querySelector('td.ausgabe'),
// Den eingegebenen Wert bereit stellen:
eingabe = event.target.value,
// Das Ergebnis berechnen:
ergebnis = eingabe * faktor;
// Das Ergebnis in die Tabellenzelle eintragen:
ausgabe.textContent = ergebnis;
}
});
</script>Wenn es ganz etwas anderes ist, dann mach besser einen neuen Thread auf.
Gern, in meinem Posting #5 sind ja schon script-Tags drum herum. Das an das Ende des body, vor das schließende </body> stellen. Das pattern in dem <input> brauchst Du dann nicht.
Ich bin bei meinem Vorschlag von dem aus gegangen, was unter deinem Link zu sehen war. D. h. das Eingabefeld muss die ID "inputField" und das Pattern haben.
Das CSS dann in style-Tags und in den Head-Bereich stellen:
<style>
input#inputField {
outline: none;
}
input#inputField:invalid {
border: 2px solid red;
}
</style>Siehe auch hier:
CSS/Tutorials/Einstieg/Stylesheets einbinden – SELFHTML-Wiki
Möglicher Weise hilft es schon weiter, wenn Du mit der Pseudoklasse :invalid das Eingabefeld rot markierst:
input#inputField {
outline: none;
}
input#inputField:invalid {
border: 2px solid red;
}Oder, wenn Du den Benutzer ganz an einer ungültigen Eingabe hindern willst, mit Javascript, dann sind die Bedingungen ohnehin besser lesbar und klarer:
<script>
document.getElementById('inputField').addEventListener('input', event => {
const
input = event.target,
val = input.value;
// Prüfen ob eine gültige Eingabe vorliegt:
if (val == '' || parseInt(val) >= 1 && parseInt(val) <= 157 || val == 'M') {
// Die Eingabe ist gültig, wir speichern den Wert:
input.dataset.validValue = val;
} else {
// Die Eingabe ist ungültig, wir setzen die Eingabe
// auf den letzten gültigen Wert zurück:
input.value = input.dataset.validValue;
}
});
</script>Warum bestehst Du denn darauf, das mit Bootstrap zu machen? An den ausbleibenden Antworten erkennst Du ja, dass niemand Interesse daran hat.
Und bei deiner vorigen Frage hast Du gesehen, dass die Aufgabe mit wenigen Zeilen CSS zu lösen war, ohne eine Inflation an Container wie man es von Bootstrap kennt.
Bootstrap war vor 10, 15 Jahren eine gute Sache aber heute veraltet und überflüssig.
Siehe auch hier:
Du findest den Radiobutton in $_POST unter dem Schlüssel, den Du als name-Attribut den Radiobuttons zugewiesen hast:
$Markt= $_POST["Markt"];Kernproblem: Um fest zu stellen ob 3x falsch geraten wurde, musst Du den Schleifenzähler count abfragen, nicht den String.
Ich bin der Meinung, dass die Arbeit mit break und continue nur Verwirrung stiftet, klarer wird es, wenn man verschachtelte if-Abfragen verwendet:
<script>
function schreibwas() {
var count = 1;
var antwort1 = "Laika";
var antwort2 = "Juri Gagarin";
// antwort3 ist keine Antwort sondern eine Meldung an den Benutzer
// var antwort3 = "3x falsch";
do {
var eingabe = prompt(count + ". Versuch. Wie hieß der erste Erdbewohner im All:", "");
if (eingabe == antwort2) {
alert("Fast richtig, Sie dürfen noch einmal raten");
// Der Benutzer darf noch ein Mal raten
} else if (eingabe == antwort1) {
alert("Das ist richtig");
// Richtige Antwort, durch die Bedingung am Schleifenende wird
// die Schleife verlassen werden
} else
// Wenn wir an dieser Stelle ankommen, wurde falsch geraten.
// Prüfen, ob es schon der letzte Versuch war:
if (count >= 3) {
document.getElementById("ergebnis").innerHTML = "3x falsch";
} else {
document.getElementById("ergebnis").innerHTML = "Falsch, Sie dürfen noch einmal raten";
}
count++;
} while (eingabe != antwort1 && count <= 3)
}
</script>(ungetestet)
Die Initialisierung für den Zähler hast Du ja schon. Du musst ihn nur noch am Ende der Schleife erhöhen
count++;
} while (eingabe != antwort1 && count < 3)Da ist eine schließende geschweifte Klammer fehl am Platze:
do {
var eingabe = prompt(count + ". Versuch. Wie hieß der erste Erdbewohner im All:", "");
} // Die schließende Klammer ist hier fehl am Platze
if (eingabe == antwort2) {Lösche ich sie ist der Code zumindest frei von Syntaxfehlern. Rückt man den Code sinnvoll ein, sieht man schnell, dass da etwas nicht stimmt.
Benutze bitte Code-Tags wenn Du Code postest, das </> in der Werkzeugleist oben.
Poste bitte auch mal das Javascript, was Du im Moment hast.
Ja, in meinem Posting #2 hatte ich zwei Alternativen beschrieben, d. h. Du hättest nur eine umzusetzen brauchen.
Außerdem: Du zeigst ja dem Benutzer an, der wievielte Versuch es ist. Dazu musst Du beim Zählen mit 1 beginnen, also let count = 1;.
Wenn ich mir deinen anderen Thread ansehe, sehe ich zwei Möglichkeiten, das zu berücksichtigen:
1. Bei der Abfrage innerhalb der do-Schleife die Schleife verlassen:
do {
if (count <= 3) { // Hier fehlte das "if"
var eingabe = prompt(count + ". Versuch. Wie hieß der erste Erdbewohner im All:", "");
} else {
break;
}2. Den Counter in der while-Bedingung berücksichtigen:
} while (eingabe != antwort1 && count < 3)Hallo Patrick, hast Du es inzwischen zum Laufen bekommen?
Am Anfang des do fehlte ein if:
do {
if (count <= 3) { // Hier fehlte das "if"
var eingabe = prompt(count + ". Versuch. Wie hieß der erste Erdbewohner im All:", "");
}Und die schließende geschweifte Klammer ganz am Ende musst Du vor das while verschieben:
} while (eingabe != antwort1)
{
document.getElementById("ergebnis").innerHTML = "3 × falsch";
}
// } die schließende Klammer gehört vor das "while"Dann sind zumindest schon Mal die Syntaxfehler raus und die Frage wird angezeigt.
Hast Du denn das Problem lösen können?
Hallo Patrick und willkommen im Forum!
Wirf mal einen Blick in die Console, dort müssten Fehlermeldungen zu sehen sein, die dir weiter helfen.
Arbeiten mit dem Seiteninspektor – SELFHTML-Wiki
Dort auf das Tag "Console" gehen.