This is an old revision of the document!
Interaktion mit HTML
Der HTML-Code einer Webseite kann mit JavaScript komplett kontrolliert werden, d.h. verändert, ergänzt, geschlöscht oder erzeugt werden. Auch sind Reaktionen auf Benutzereingaben möglich.
Einführungsbeispiel
- Legen Sie ein neues Verzeichnis an und kopieren Sie folgende Dateien,
intro.htmlundintro.jsin dieses Verzeichnis.
- intro.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="intro.js"></script> <title>HTML-Interaktion</title> </head> <body> <h1>HTML Interaktion</h1> <p>Hallo. Das folgende div-Element hat die ID <tt>ausgabe</tt>. Darüber kann es in JavaScript mit <tt>document.getElementById("ausgabe");</tt>angesprochen werden.</p> <p>Drücke folgenden Knopf: <button onclick="knopfdruck()">Drück mich!</button></p> <div id="ausgabe" style="background:lightgreen"> Original Text </div> </body> </html>
- intro.js
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 <b>zu viel</b>!`; } }
- Testen Sie die Webseite. Studieren Sie den Code.