Ausgabetext mit zuvor eingegebenen Parametern erzeugen

**onemorenerd** · 13.01.2008, 13:05

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
  function toText() {
    f = document.forms[0];
    document.getElementById('n').innerHTML = f.n.value || 'Roger';
    document.getElementById('j').innerHTML = f.j.value || 'Detektiv';
    document.getElementById('c').innerHTML = f.c.value || 'keine';
}
</script>
</head>
<body>
<form onsubmit="toText(); return false;">
Der Hase 
<span id="n"><input type="text" name="n" /></span>
, der als Beruf 
<span id="j"><input type="text" name="j" /></span> 
ist, brachte den Kindern 
<span id="c"><input type="text" name="c" /></span> 
Ostereier.
<input type="submit" value="ok" />
</form>
</body>
</html>

**cutaway** · 13.01.2008, 13:35

Hey das ging aber flott und ist genau das was ich suche. Vielen Dank schon mal.

Eine Frage habe ich noch dazu und meine Java Script Fähigkeiten sind auch nicht die Besten (das Script verstehen und anpassen ist allerdings nicht das Problem).

Wie kann ich das Script so verändern dass erst die Parameter abgefragt werden in Form von Name:_____ Beruf:___ etc. und erst nach "OK" die Variablen in einem definierten Text erscheinen? Weil so wie es derzeit ist gibt man die Parameter ja direkt in den Textlücken ein.

Wenn man das noch hinbekommen würde wäre es super

**onemorenerd** · 13.01.2008, 14:13

Denk dir bei dem obigen Beispiel einfach den Text weg. Was bleibt ist ein Formular mit drei Inputs und einem Button.

Code:

<form onsubmit="toText(); return false;">
    <input type="text" name="n" />
    <input type="text" name="j" />
    <input type="text" name="c" />
    <input type="submit" value="ok" />
</form>

Und nun stell dir den Text inklusive der Platzhalter in einem Container nach dem Formular vor.
Dieser Container, z.B. ein DIV, ist initial unsichtbar (CSS display:none).

Code:

<div style="display:none;">
    Der Hase <span id="n"></span>, 
    der als Beruf <span id="j"></span> ist, 
    brachte den Kindern <span id="c"></span> Ostereier.
</div>

Beim Klick auf den Button werden wie oben die Platzhalter durch die Formulareingaben ersetzt. Zum Schluß wird der Container noch sichtbar gemacht (CSS display:block) und das Formular ausgeblendet. Du mußt der Funktion also nur diese sichtbar/unsichtbar Anweisungen hinzufügen.

**cutaway** · 13.01.2008, 15:46

Danke für die Tipps ich habe es jetzt leicht abgeändert realisiert:

Code:

<html>
<head>
<script language="javascript">
function Sichtbar()
{
    document.getElementById('QuelltextAnzeigen').style.visibility = "visible";
}
function Parameter() {
    f = document.forms[0];
    document.getElementById('n').innerHTML = f.n.value || '0';
    document.getElementById('j').innerHTML = f.j.value || '0';
    document.getElementById('c').innerHTML = f.c.value || '0';
}
</script>
<title></title>
</head>

<body>

<form onsubmit="Parameter(); return false;">
    <input type="text" name="n" />
    <input type="text" name="j" />
    <input type="text" name="c" />
    <input type="submit" value="Quelltext generieren" onclick="Sichtbar();"/>
</form>

<div id="QuelltextAnzeigen" style="visibility:hidden;">
Parameter1: <span id="n"></span><br>
Parameter2: <span id="j"></span><br>
Parameter3: <span id="c"></span><br>
</div>

</body>
</html>

Ausgabetext mit zuvor eingegebenen Parametern erzeugen