HTML-Interaktion
HTML Interaktion
Hallo. Das folgende div-Element hat die ID ausgabe. Darüber kann es in
JavaScript mit document.getElementById("ausgabe");angesprochen werden.
Drücke folgenden Knopf:
Original Text
let anzahl = 0;
function knopfdruck() {
let mydiv = document.getElementById("ausgabe");
anzahl++;
if (anzahl<5) { // innerText verwenden, wenn kein HTML-Code eingefügt werden soll
mydiv.innerText = `Danke, dass Du den Knopf ${anzahl} mal gedrückt hast.`;
} else { // inklusive HTML-Code. Es muss auf Sonderzeichen geachtet werden.
mydiv.innerHTML = `${anzahl} mal ist mir zu viel!`;
}
}
* Testen Sie die Webseite. Studieren Sie den Code.
**Bonus** Geben Sie an, wie oft der Knopf pro Sekunde gedrückt wurde. Fügen Sie zusätzlich einen «Reset»-Knop ein. Zeitmessung in JavaScript:
// Aktuelle Zeit speichern.
start = new Date();
//
// dann irgendwo, irgendwann später:
millisekunden = (new Date())-start;
Buchstaben Salat
Buchstaben Salat
Ausgabe
Die JavaScript-Datei ''buchstabensalat.js'' enthält den Code zum [[lehrkraefte:blc:informatik:ffprg1-2024:random#buchstaben_in_woertern_vertauschen|Verwürfeln eines Texts]] plus folgende Funktion:
//
//
// Hier fehlt der Code, der einen Text verwürfelt
//
//
function verwuerfeln() { // Wird aufgerufen, wenn der Knopf gedrückt wird.
let eingabe = document.getElementById("eingabe");
let ausgabe = document.getElementById("ausgabe");
ausgabe.innerText = textwuerfeln(eingabe.value);
}
* Vervollständigen Sie die JavaScript-Datei, damit die Seite funktioniert.
* Fügen Sie einen zweiten Knopf hinzu, der den verwürfelten Text in das Eingabe-Feld kopiert.
Zahlenraten
Zahlenraten
Ich habe mir eine Zufallszahl zwischen 0 und 99 gemerkt. Errate Sie!
* Die JavaScript-Datei könnte wie folgt aussehen:
// Globale Variablen
let geheim = 0;
let anzahl = 0;
function neueZahl() {
// Zugriff auf globale Variablen
geheim = Math.floor(Math.random()*100);
anzahl = 0;
}
function pruefen() {
let raten = document.getElementById('raten');
let ergebnis = document.getElementById('ergebnis');
// Umwandlung in eine Zahl, weil value immer ein String ist.
let zahl = Number(raten.value);
//
// soll eine entsprechende Meldung im «ergbnis» angezeigt werden.
//
}
// Am Anfang eine neue Zufallszahl bestimmen
neueZahl();
// Globale Variablen
let geheim = 0;
let anzahl = 0;
function neueZahl() {
// Zugriff auf globale Variablen
geheim = Math.floor(Math.random()*1000);
anzahl = 0;
}
function pruefen() {
let raten = document.getElementById('raten');
let ergebnis = document.getElementById('ergebnis');
// Umwandlung in eine Zahl, weil value immer ein String ist.
let zahl = Number(raten.value);
anzahl++;
if (zahlgeheim) {
ergebnis.innerText = `Deine Zahl ist zu gross. Anzahl Versuche: ${anzahl}`;
} else {
ergebnis.innerText = `Super! Du hast die Zahl nach ${anzahl} Versuchen gefunden!`;
neueZahl();
}
}
neueZahl();