✔ document.getElementById nur im <input>-Element möglich?

Dr Dau

Dr Dau

ich wisch hier durch
Hallo!

Tja, wer hätte es gedacht dass ich mich mal mit JS befasse..... entsprechend fehlen mir natürlich auch die notwendigen Kenntnisse.

Also, ich habe ein Formular erstellt, in diesem wird per onclick auf den Button eine Berechnung durchgeführt (welche funktioniert):
Code: 
<input type="button" name="Ausgabe" value="berechnen" onclick="document.getElementById('Ergebnis_a').value = this.form.Ergebnis.value = .....bla bla bla.....">
Die korrekte Ausgabe erfolgt einmal noch im Formular:
Code: 
<input type="text" id="Ergebnis" readonly="readonly" size="2">
Und einmal ausserhalb des Formulars:
Code: 
<input type="text" id="Ergebnis_a" size="2">
Da die Ausgabe allerdings mitten in einem Text erscheinen soll, sind <input>-Elemente alles andere als geeignet.

Also versuche ich es z.B. in einem <div>-Element auszugeben:
Code: 
<div id="Ergebnis_b"></div>
Beim onclick habe ich natürlich von "Ergebnis_a" auf "Ergebnis_b" geändert.
Trotzdem bekomme ich im <div>-Element nichts angezeigt.
Auch verschiedene andere HTML-Elemente haben keinen Erfolg gebracht (ausser halt <input>).

Wie bekomme ich es also hin dass die Ausgabe in irgendeiner unauffälligen weise im Text ausgegeben wird?

Gruss Dr Dau
 
Hi,

innerHTML dürfte dir hier weiterhelfen, das Ergebnis in dem <div>-Element oder einem anderen HTML-Element auszugeben, die im Gegensatz zum <input>-Element die value-Eigenschaft (entspricht dem gleichnamigen HTML-Attribut) des elements-Objekts überhaupt nicht besitzen.

mfg Maik
 
Bei onclick reicht auch this.value, und dann wie Maik sagte mit innerHTML oder mit dem Node Objekt :)

Hier ein Beispiel
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
.box{
width:300px;
height:100px;
border:#666666 1px solid;
}
</style>
<script type="text/javascript">
function lesen_schreiben(){
document.getElementById("ausgabe").innerHTML = document.getElementById("text").value;
}
</script>
</head>

<body>
<div id="ausgabe" class="box"></div>
<input type="text" id="text" />
<button onclick="lesen_schreiben()">Auslesen/schreiben</button>
</body>
</html>
 
@one6666, mit Funktionen darf man mir nicht kommen..... daran bin ich bereits kläglich gescheitert.

Maik hat mir schon den richtigen Anschubser gegeben.
Nun habe ich allerdings das nächste Problem..... den Text verstecken, solange das Formular nicht genutzt wird (ist ja Blödsinn nur den halben Text lesen zu können ;)).

Also das Formular trägt den Namen "Rechner".
Das <input>-Element "Ergebnis" habe ich nochmal leicht geändert:
Code: 
<input type="text" name="Ergebnis" readonly="readonly" size="2" value="0">
Wenn es ohne diese "Zwischeneinblendung" (so nenne ich es jetzt mal, da das Feld ansonsten für nichts gebraucht wird) nicht funktioniert, dann setze ich das Feld später halt auf type="hidden".

Und nun versuche ich über eine if/else-Bedingung den Text anzuzeigen/auszublenden, in dem ich den Wert vom <input>-Element "Ergebnis" abfrage und vergleiche:
Code: 
<script type="text/javascript">if(document.Rechner.Ergebnis.value == "0") { document.write('hossa<p style="display:none;">'); } else { document.write('<p>laber'); }</script>
foo <b><span id='meinAbsatz'></span> bar</b>
</p>
Aber irgendwetwas läuft da noch schief..... wenn ich den Vergleichoperator auf "==" stelle, dann wird nichts angezeigt (ausser "hossa")..... egal ob ich das Formular nutze oder nicht.
Wenn ich den Vergleichsoperator auf "!=" setze, dann wird immer der Text angezeigt (auch "laber")..... egal ob ich das Formular nutze oder nicht. :(
Aber die Ausgabe vom Formular wird nur angezeigt wenn ich das Formular auch nutze.

Vom Prinzip scheint die if/else-Bedingung also zu funktionieren.
Das Problem muss daher irgendwo beim Vergleich der Werte liegen. :(

[edit]
OK, das Problem liegt daran dass "document.Rechner.Ergebnis.value" zwar den Wert aus value= ausliest, aber nicht den im <input>-Element befindlichen Inhalt (auch dann nicht wenn ich value= rausnehme).
Ich müsste also den Value-Wert dynamisch ändern..... aber scheinbar mögen es HTML-Tags nicht wenn man in diesen JS ausführen will. :(
[/edit]

[edit2]
OK, ich habe nun einfach überall einen Defaultwert eingetragen und lassen den Text von anfang an mit selbigen angezeigt.

Aber.....
Nachdem ich mir nun tagelang den A*sch aufgerissen habe, musste ich feststellen dass alles im IE5.5 wunderbar funktioniert (ich hatte mich schon entspannt zurück gelegt) und der Quellcode auch valide ist.
Aber...... die 2.
Im Firefox 2.0 funktioniert nichts. :(
Nach vielem rumprobieren musst ich feststellen dass der FF nicht mit "document.all.Ausgabe.innerHTML" klarkommt.
Mit "this.form.Ausgabe.value" hingegen hat er keine Probleme..... was allerdings ein <input>-Element im Formular voraussetzt. :(
[/edit2]
 
Zuletzt bearbeitet:
Zeige doch mal alles, was du hast, und markiere die Problemstellen ein wenig.

Die Gründe für das Nicht-Funktionieren können so mannigfaltig sein, dass man es anhand der Schnipsel nicht wirklich gut beantworten kann.
 
Sven Mintel hat gesagt.:
Zeige doch mal alles, was du hast.....
Zum Vergrößern anklicken....
Da gibt es nich mehr viel zu zeigen..... ich sitze hier ja nicht untätig rum (ich müsste somit mehr oder weniger von vorne anfangen).
Der Kram hat nicht so funktioniert wie es sollte..... also habe ich die Ausgabe nun in <input>-Elemente gepackt und diese per CSS "getarnt".
Ergebnis: 48 Zeile CSS (vorher 12) und 28 Zeilen HTML (wovon 4 Zeilen JS enthalten).
Da der IE ab v7 und die Gecko-Browser die <input>-Elemente nicht mittels "overflow:visible" dynamisch in der Breite an den Inhalt anpassen können, stellen diese Browser die Seite halt nicht so dar wie ich es gerne hätte.

Für die paar Zeilen Code habe ich schon viel zu viel Zeit investiert.
Ich muss erstmal ein paar Nächte drüber schlafen ob ich mich nochmal daran versuche oder ob ich den ganzen Kram in die Tonne trete (war eh nur für die Allgemeinheit gedacht..... für mich persönlich habe ich schon seit über einem Jahr eine Lösung in PHP (44 Zeilen Code insgesamt)).
 
Hi,

vielleicht hilft folgende Variante:

- verstecke den Text zu Beginn mit der CSS-Eigenschaft display: 'none'
- wurde in das entsprechende Textfeld ein Eingabe gemacht, blendest du den Text mit geänderten Inhalt ein, sonst wird er ausgeblendet

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div id="text_id" style="display: none;">Hallo Welt, heute ist ein <span id="inner_id"></span> Tag!</div>

<form name="Rechner" method="get" action="ziel.html">
  <input type="text" name="Ergebnis" value="">
  <input type="button" name="Ausgabe" value="berechnen" onclick="if(this.form.Ergebnis.value!=''){document.getElementById('text_id').style.display=''; document.getElementById('inner_id').innerHTML=this.form.Ergebnis.value;}else{document.getElementById('text_id').style.display='none';}; return false;">
</form>
</body>
</html>

Sogar ohne Funktion, wobei ich schon allein wegen der besseren Lesbarkeit und nicht zuletzt wegen der Wartbarkeit des Codes zu einer Funktion raten würde.

Ciao
Quaese
 
Es hat sich einiges getan.....
Sogar eine Fehlerbehandlung habe ich eingebaut bekommen. ;)
Allerdings habe ich noch nicht rausbekommen warum das Formular bei F5 nicht auf die Default-Einträge zurück springt (Ablaufdatum ist der 1.1.1970 und Cache-Control steh auf no-cache). :(
Ist zwar nicht die ideale Lösung, aber ich habe erstmal einen Button zum neuladen reingesetzt (location.reload(true)) und einen entsprechenden Hinweis vermerkt..... so wird das Formular wenigstens zuverlässig zurück gesetzt.
Quaese hat gesagt.:
vielleicht hilft folgende Variante:

- verstecke den Text zu Beginn mit der CSS-Eigenschaft display: 'none'
- wurde in das entsprechende Textfeld ein Eingabe gemacht, blendest du den Text mit geänderten Inhalt ein, sonst wird er ausgeblendet

Beispiel:
Zum Vergrößern anklicken....
Ja, hat mich schon eine ganze Ecke weiter gebracht. :)
Quaese hat gesagt.:
Sogar ohne Funktion, wobei ich schon allein wegen der besseren Lesbarkeit und nicht zuletzt wegen der Wartbarkeit des Codes zu einer Funktion raten würde.
Zum Vergrößern anklicken....
Die Wartbarkeit kann ich getrost vernachlässigen, da an der Seite eh nichts mehr geändert wird (wenn sie fertig ist).
Ich befasse mich nun seit 5 Jahren mit PHP..... Funktionen/Klassen/OOP/reguläre Ausdrücke habe ich bis heute nicht kapiert.

Trotzdem habe ich es jetzt nochmal in JavaScript versucht.
Die Funktionen funktionieren so wie sie sollen..... ob aber auch alles korrekt ist, kann ich natürlich nicht mit Sicherheit sagen.
Die Suche mit regulären Ausdrücken funktioniert, zum glück gibt es aber nicht wirklich viel zu suchen/ersetzen (suche alle Kommata und ersetze sie mit Punkten, bzw. die Umkehrfunktion (soll erstmal jemand wissen dass ein Punkt ein Platzhalter ist und maskiert werden muss ;))).
 
Dr Dau hat gesagt.:
Allerdings habe ich noch nicht rausbekommen warum das Formular bei F5 nicht auf die Default-Einträge zurück springt (Ablaufdatum ist der 1.1.1970 und Cache-Control steh auf no-cache). :(
Zum Vergrößern anklicken....

Da musst du den Browserfabrikanten die Schuld geben :-)

Probiers mal so:
Code: 
<script type="text/javascript">
<!--
window.onload=function()
{
  var f=document.forms;
  for(var i=0;i<f.length;++f){f[i].reset();}
}
//-->
</script>
 
Sven Mintel hat gesagt.:
Da musst du den Browserfabrikanten die Schuld geben :-)
Zum Vergrößern anklicken....
Also sind die Meta-Angaben unnütz?
Egal, ich lasse sie drin..... um so mehr Code, um so professioneller sieht es aus. :D
Sven Mintel hat gesagt.:
Probiers mal so:
Zum Vergrößern anklicken....
Funktioniert.
Allerdings halte ich eine Schleife bei einem einzelnen Formular für nicht notwendig.
Zudem nutze ich das name-Attribut zur Identifizierung (sagt halt irgendwie mehr aus).
Ich habe den Code also abgewandelt. ;)

Meinen Button lasse ich aber trotzdem drin..... mehr Code und so. :p

Nochmal über den Code drüber schauen, evtl. hier und da noch etwas Feinschliff, aber ich denke das Thema sollte erledigt sein. ;)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück