document.getElementById nur im <input>-Element möglich? @ tutorials.de: Tutorials, Forum & Hilfe

Dr Dau · 06.02.10 20:34

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 :

1	<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 :

1	<input type="text" id="Ergebnis" readonly="readonly" size="2">

Und einmal ausserhalb des Formulars:

Code :

1	<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 :

1	<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

Maik · 06.02.10 20:40

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

one6666 · 06.02.10 20:47

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

Hier ein Beispiel

HTML-Code:

<!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>

Dr Dau · 07.02.10 00:04

@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 :

1	<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 :

1
2
3

<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]

Sven Mintel · 07.02.10 21:53

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.

Dr Dau · 08.02.10 06:30

Zitat von Sven Mintel

Zeige doch mal alles, was du hast.....

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)).

**Quaese** · 08.02.10 08:41

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

Dr Dau · 21.02.10 01:56

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.

Zitat von Quaese

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:

Ja, hat mich schon eine ganze Ecke weiter gebracht.

Zitat von Quaese

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.

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

)).

Sven Mintel · 21.02.10 02:06

Zitat von Dr Dau

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).

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>

Dr Dau · 21.02.10 04:10

Zitat von Sven Mintel

Da musst du den Browserfabrikanten die Schuld geben

Also sind die Meta-Angaben unnütz?
Egal, ich lasse sie drin..... um so mehr Code, um so professioneller sieht es aus.

Zitat von Sven Mintel

Probiers mal so:

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.

Nochmal über den Code drüber schauen, evtl. hier und da noch etwas Feinschliff, aber ich denke das Thema sollte erledigt sein.

Sven Mintel · 21.02.10 10:17

Naja, es ist sicher kein Zufall, dass die Formulardaten erhalten bleiben.
Es soll sicher den Nutzer davor bewahren, dass unbeabsichtigt bereits getätigte Eingaben verloren gehen....gibt da bestimmt auch Browsereinstellungen, welche dies beeinflussen(ich kenn das eh nur vom FF).

Hier eine andere Variante, ohne JS, welche bei mir dies Verhalten umgeht:

Code :

1	<form [B]name="_<?php echo time(); ?>"[/B]>

...das änderliche name-Attribut scheint FF zu veranlassen, die Nutzereingaben zu verwerfen.

Zur Schleife: natürlich ist sie unnütz....wenn man weiss, dass da nur ein Formular ist *kristallkugelputz*

Dr Dau · 15.04.10 10:38

Puh, wie die Zeit vergeht.....
Es ist vollbracht.

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

document.GetElementById is not a function

document.getElementById

document.all.innerHTML durch getElementByID ersetzen

Problem mit Funktion und document.getElementById

Problem mit document.getElementById ?

E-Mail:

Abonnieren Abbestellen