Hier benötigst Du Komponenten im HTML- und Script-Bereich. Zunächst einmal muss der Nutzer die Möglichkeit haben seinen Namen einzugeben. Dafür eignet sich ein Input-Field:
<input type="text" id="name">
Die id benötigst Du zur späteren Referenzierung. Um den Text in der HTML-Seite einzubetten, benötigst Du ein DIV, das Du im Skript über die id ansprechen kannst.
<div style="font-size:20px;" id="output"></div>
Mit dem Style-Attribut kannst Du die Darstellung des Textes auf der Seite gestalten. Hier wurde die Schriftgröße auf 20 Pixel hochskaliert.
Wir definieren nun eine Funktion, die den gewünschten Text im HTML-DIV platziert:
function show_text(){
var name = document.getElementById("name").value;
var output = document.getElementById("output");
var html = "Hallo " + name + "!";
output.innerHTML = html;
}
Zuerst holen wir uns den vom Besucher eingegebenen Namen über
var name = document.getElementById("name").value;
Mit
var output = document.getElementById("output");
speicherst Du das
Output-DIV in einer
Variable. In der darauffolgenden Zeile baust Du Dir den gewünschten Ausgabetext zusammen und weist diesen dem
Attribut innerHTML des in der Variable
ouput gespeicherten Output-DIVs zu.
output.innerHTML = html;
Das dazugehörige
JSFiddle findest Du hier:
https://jsfiddle.net/hqg94z8d/14/
