Arbeitsauftrag 1: Vorbereitung
- Öffnen Sie die Datei
_vorlage.html in Visual Code Studio.
- Speichern Sie die Datei in Ihrem Ordner unter
0_ausgabemoeiglichkeiten_div.html ab.
- Ergänzen Sie den Quellcode wie folgt:
<html>
<head>
<title>Ausgabemöglichkeiten</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
"use strict";
function fDivPreis() {
document.getElementById("idAusgabe").innerHTML = "Der Preis"
}
</script>
</head>
<body>
<h1>Ausgabemöglichkeiten</h1>
<button onClick="fDivPreis();">Ausgabe von 'Preis' in ein Div-Element!</button>
<div id="idAusgabe">Bitte den Button klicken! Nach dem Klicken des Buttons erscheint hier eine Ausgabe.</div>
</body>
</html>
- Speichern Sie die Datei.
- Führen Sie die Datei in einem Browser aus!
- Drücken Sie den Button.
- Beschreiben Sie mit Worten, was passiert:
3 Button „150€“
- Erzeugen Sie einen dritten Button, in dem steht Ausgabe von ‚150€‘ in das div-Element!
- Schreiben Sie eine Funktion
fDiv150, die ein div-Element mit 150€ erzeugt.
- Speichern Sie die Datei.
- Testen Sie das Programm.
Im Browser sollte nun folgendes erscheinen:
Ausgabemöglichkeiten
[Ausgabe von 'Preis' in ein Div-Element!]
[Ausgabe von 'beträgt' in ein Div-Element!]
[Ausgabe von '150€' in ein Div-Element!]
Bitte den Button klicken! Nach dem Klicken des Buttons erscheint hier eine Ausgabe.