Text zur Laufzeit ändern

[Marcus]

Hallo again,

wie kann ich zur Laufzeit einen beliebigen Text ändern.

Vorgang: Es gibt eine Combobox und darunter einen Text.

Wenn ich den Inhalt der Combobox ändere, möchte ich einen entsprechenden Text darstellen (wenn möglich: ohne daß sich die Seite neu laden muss).
Geht das überhaupt?

Dank und Gruß
Marcus

[Felix Riesterer]

Lieber Marcus,

Geht das überhaupt?

Mit Javascript? Natürlich!

wie kann ich zur Laufzeit einen beliebigen Text ändern.

Indem Du Deinem "beliebigen Text" eine ID verpasst und mit JS darauf zugreifst.

Vorgang: Es gibt eine Combobox und darunter einen Text.

Was ist eine Combobox?

Wenn ich den Inhalt der Combobox ändere, möchte ich einen entsprechenden Text darstellen (wenn möglich: ohne daß sich die Seite neu laden muss).

In welchem Zusammenhang stehen das vom Besucher Veränderte und der sich dynamisch verändernde Text?

Deine Beschreibung ist noch nicht präzise genug, als dass man Dir Genaueres raten könnte. Aber vielleicht findest Du ja gerade selbst heraus, was Du eigentlich genau willst... ;-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Marcus]

Was ist eine Combobox?

In welchem Zusammenhang stehen das vom Besucher Veränderte und der sich dynamisch verändernde Text?

Hallo, danke für die erste Hilfe.

Combobox = Auswahlbox (HTML Formularfeld).
Der Besucher kann in einer DropDown Liste verschiedene Items auswählen, wenn er eines davon ausgewählt hat, soll sich der Text darunter verändern.

Kannst Du mir für so etwas ein Beispiel nennen?

Dank und Gruß
Marcus

[Felix Riesterer]

Lieber Marcus,

Der Besucher kann in einer DropDown Liste

aha, "Dropdown-Liste". Damit kann ich was anfangen.

wenn er eines davon ausgewählt hat, soll sich der Text darunter verändern.

Also "der Text" sieht im Quellcode dann wie aus?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Marcus]

Also "der Text" sieht im Quellcode dann wie aus?

ähm... wie meinen? :-)
Der Text ist einfach ein Text (genauer: ein Wort) in einer Tabellenzelle.

[Felix Riesterer]

Lieber Marcus,

Der Text ist einfach ein Text (genauer: ein Wort) in einer Tabellenzelle.

Also eine Tabellenzelle. Warum muss ich Dir diese Informationen aus der Nase ziehen? Warum postest Du nicht etwas Quelltext???

Gib der Tabellenzelle eine ID. <td id="wechseltext"> Dann kannst Du mit Javascript über diese ID darauf zugreifen.

Links zum Thema:
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id
http://de.selfhtml.org/javascript/objekte/all.htm#inner_text
http://de.selfhtml.org/javascript/objekte/all.htm#inner_html

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Marcus]

» http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id

http://de.selfhtml.org/javascript/objekte/all.htm#inner_text
http://de.selfhtml.org/javascript/objekte/all.htm#inner_html

Liebe Grüße aus Ellwangen,

Danke, das probier ich mal aus.

[JürgenB]

Hallo Felix ,

http://de.selfhtml.org/javascript/objekte/all.htm#inner_text
http://de.selfhtml.org/javascript/objekte/all.htm#inner_html

bitte verführe Anfänger nicht dazu innerHTML ö.Ä. zu benutzen. Im MAC-IE kann dieses gerade in Zusammenhang mit Tabellen bis zum Browsercrash führen. Wenn es nur um Texte geht, sollte immer firstChild.data oder .nodeValue zum Einsatz kommen.

Gruß, Jürgen

[Felix Riesterer]

Lieber Jürgen,

Wenn es nur um Texte geht, sollte immer firstChild.data oder .nodeValue zum Einsatz kommen.

Vielen Dank für den Hinweis! Habe soeben für mich selbst dazugelernt! ;-)

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Cybaer]

Hi,

Vielen Dank für den Hinweis! Habe soeben für mich selbst dazugelernt! ;-)

Wobei, außer bei vereinzelten Anwendern von JürgenB TableSort(?)-Routine, der Fehler nicht auftritt! (*SCNR*) *Ganz* besonders nicht, wenn man nur einfache Elemente (also nicht komplette Tabellen(-teile)) oder Text mit innerHTML austauscht. Nachdem er ja dies mehrfach angemeckert hat, habe ich ein eigenes innerHTML-Script durch IE-Macianer testen lassen. Ergebnis: Kein Problem.

Gruß, Cybaer

[JürgenB]

Hallo Cybaer,

hier noch mal der Link zu dem alten Thread über das MAC-IE/innerHTML-Prolem: http://forum.de.selfhtml.org/archiv/2004/11/t95498/#m581172.

Die Verbindung von innerHTML, Tabellenfeldern und Ändern der Feldinhalte scheint zum Absturz zu führen. Aber möglicherweise kann man sich noch nicht mal auf die konsequente Umsetzung der Fehler verlassen. (*g*) Oder vieleicht ist das Problem auch OS-Versionsabhängig?

Gruß, Jürgen

PS: Wie sieht dein Testscript aus?

[Cybaer]

Hi,

hier noch mal der Link zu dem alten Thread über das MAC-IE/innerHTML-Prolem: http://forum.de.selfhtml.org/archiv/2004/11/t95498/#m581172.

Wir hatten uns schonmal diesbezügl. auseinandergesetzt, allerdings war das IIRC ausgerechnet zu der Zeit, als das Forum ein paar Threads nicht archivierte. =:-/

Die Verbindung von innerHTML, Tabellenfeldern und Ändern der Feldinhalte scheint zum Absturz zu führen.

IE hat auch beim 6er ggf. Probleme bei dynamischen Tabellen. :-(

Aber möglicherweise kann man sich noch nicht mal auf die konsequente Umsetzung der Fehler verlassen. (*g*)

:)

Oder vieleicht ist das Problem auch OS-Versionsabhängig?

Na ja, soviele Mac-User die noch IE fahren, gibt es ja nicht. Wer Geld hat, surft tigermäßig mit Safari, wer Grips hat mit iCab ... ;->

PS: Wie sieht dein Testscript aus?

Aus Coding: Ticker4All:

  
// Auslesen (und ggf. kürzen)  
  if(is_w3cxTicker) {  
   htmlText=tickerElement.innerHTML; tickerElement.innerHTML="";  
   htmlText=replaceHtmlTags(htmlText,"!--","|",true);  
   htmlText=replaceHtmlTags(htmlText,"BR","|",true);  
   htmlText=replaceHtmlTags(htmlText,"HR","|",true);  
  }  
  else if(is_w3cTicker) {  
   if(tickerElement.hasChildNodes()) { var Node=tickerElement.firstChild;  
    while(Node!=null) {  
     if(Node.nodeName=="#text") { Value=reduceHtmlSpaces(Node.nodeValue); htmlText+=Value; Node.nodeValue=""; }  
     else if(Node.nodeName=="#comment" || Node.nodeName=="BR" || Node.nodeName=="HR") { htmlText+="|"; }  
    Node=Node.nextSibling;  
    }  
    // HTML-Elemente entfernen (1. Element nicht, wenn Typ 3/Textknoten)  
    for(i=(tickerElement.firstChild.nodeType==3)?1:0;i<tickerElement.childNodes.length;i++) { tickerElement.removeChild(tickerElement.childNodes[i]); }  
   }  
   // Ggf. fehlenden HTML-Textknoten einfuegen  
   if(!tickerElement.hasChildNodes()) { tickerElement.appendChild(document.createTextNode("")); }  
  }  
  
// ...  
// Schreiben  
 if(is_w3cxTicker) { tickerElement.innerHTML=text; }  
 else if(is_w3cTicker) { tickerElement.childNodes[0].nodeValue=text; }  

D.h., wenn der Browser innerHTML kennt (is_w3cxTicker ist true), nimmert er das, wenn nicht, (und W3C-DOM-Browser: is_w3cTicker ist true) arbeite mit Knoten.

Egal, ob der Text mehr oder weniger wird, ob viel oder gar nichts, egal ob in einer Tabelle oder nicht: Keinerlei Problem.

Gruß, Cybaer

[JürgenB]

Hallo Cybaer,

greifst du auf das Tabellenfeld über eine ID direkt zu? Ich benutze in der crashgefährdeten Routine den indirekten Weg:

  
document.getElementById("TabID").getElementsByTagName("tr")[zeile].getElementsByTagName("td")[spalte].innerHTML  

Gruß, Jürgen

[Cybaer]

Hi,

greifst du auf das Tabellenfeld über eine ID direkt zu?

Nein, gar nicht. Aber das Element mit der ID befindet sich ja ggf. in einer Tabelle.

Ich benutze in der crashgefährdeten Routine den indirekten Weg:

Ob "direkt" oder "indirekt" dürfte ganz egal sein: Wichtig ist, was hinten rauskommt. ;-) Und das ist, so oder so, ein bestimmtes Objekt - egal wie man es adressiert hat, um zu ihm zu gelangen ...

Gruß, Cybaer

[JürgenB]

Hallo Cybaer,

Ob "direkt" oder "indirekt" dürfte ganz egal sein: Wichtig ist, was hinten rauskommt. ;-) Und das ist, so oder so, ein bestimmtes Objekt - egal wie man es adressiert hat, um zu ihm zu gelangen ...

aber warum geht es dann manchmal (z.B. bei dir) und manchmal nicht (z.B. bei mir)? Irgendwo muss ja der Grund stecken. Und die Bemerkung bei Quirksmode, innerHTML sei "buggy", hilft auch nicht wirklich.

Ich bin inzwischen beim Einsatz von innerHTML sehr vorsichtig geworden und schließe die MAC-IEs dann aus.

Gruß, Jürgen

[Cybaer]

Hi,

Und die Bemerkung bei Quirksmode, innerHTML sei "buggy", hilft auch nicht wirklich.

DerAutor schreibt ja, daß der Mac bei seiner Test-Seite funktioniert, aber er gegenteilige Fälle kennt:

When setting the innerHTML of an element in Explorer 5 Mac, the element may become much larger than it was at first. This does not happen in the test page, but I encountered it often enough.
Solve this by first setting innerHTML to an empty string and then setting it to the new value.
x.innerHTML = '';
x.innerHTML = 'The <B>new</B> text'

Also naturgemäß (DHTML-Ticker) hole ich mit innerHTML viele Daten raus und tue nur wenig Daten rein. Vielleicht liegt es daran? Vielleicht ließen sich deine Probleme wie beschrieben lösen?

Ich bin inzwischen beim Einsatz von innerHTML sehr vorsichtig geworden und schließe die MAC-IEs dann aus.

Das wäre natürlich ein Weg. Sind zwar nur wenige User, aber die sind ja i.d.R. dann bereits ohne wirkliche Browser-Alternative.

Gruß, Cybaer

[JürgenB]

Hallo Cybaer,

x.innerHTML = '';
x.innerHTML = 'The <B>new</B> text'

das habe ich irgendwie übersehen oder die Bedeutung nicht erkannt. Danke für den Tipp, ich werde es mal testen.

Gruß, Jürgen

[Marcus]

N'abend zusammen.

Suuuper... Jetzt bin ich verwirrt. Was soll ich den nun machen?

Gruß
Marcus

[Cybaer]

Hi,

Suuuper... Jetzt bin ich verwirrt. Was soll ich den nun machen?

<div id="change">Alter Text</div>

IMHO: Wenn es sich nur um Text ohne Tags oder Zeilenumbrüche geht, wirst Du keine Probleme haben, egal welche Methode Du nimmst. Ansonsten vielleicht zur Sicherheit ein IE-Mac-Bugfix.

obj=document.getElementById("change");
  new="Neuer Text";

// Einfacher Weg für komplexere Inhalte (Tags & Zeilenumbrüche)
  obj.innerHTML=""; // IE-Mac-Bugfix
  obj.innerHTML=new;

// Offizieller Weg für einfache Inhalte
  obj.childNodes[0].nodeValue=new;

Gruß, Cybaer

[Marcus]

<div id="change">Alter Text</div>
obj=document.getElementById("change");
new="Neuer Text";

Gruß, Cybaer

Hallo Cybaer,

danke noch einmal. Ich habe den alten Text jetzt wie Du beschrieben hast deklariert.
Dann habe ich im Head eine Funktion eingebettet:

function neu_text()
        {
         obj=document.getElementById("change");
                new="Neuer Text";
        }

Wenn ich nun aber bei der DrowDown Liste ein "onChange='javascript:neu_text();'" einbette, dann passiert da überhaupt nichts :-).

Könntest Du mir bitte noch mal helfen?

Bye the way: Wie gebe ich der Funktion als Parameter denn den Wert mit, welcher als Value zu dem entsprechenden Eintrag in der DrowDown Liste gehört? Denn schließlich muss ich in der Funktion ja dementsprechend reagieren.

Beispiel: Wenn DrobDown "Studenten" ausgewählt, dann neuer Text: "Studienrichtung", wenn "Ausbildung" ausgewählt, dann neuer Text: "Fachrichting" ...

Dank und Gruß
Marcus

[Cybaer]

Hi,

function neu_text()
        {
         obj=document.getElementById("change");
                new="Neuer Text";
        }

Und wo ist entweder das

// Einfacher Weg für komplexere Inhalte (Tags & Zeilenumbrüche)
  obj.innerHTML=""; // IE-Mac-Bugfix
  obj.innerHTML=new;

oder das

// Offizieller Weg für einfache Inhalte
  obj.childNodes[0].nodeValue=new;

?

Wenn ich nun aber bei der DrowDown Liste ein "onChange='javascript:neu_text();'" einbette, dann passiert da überhaupt nichts :-).

Was nicht wirklich wundert. ;-)

Bye the way: Wie gebe ich der Funktion als Parameter denn den Wert mit, welcher als Value zu dem entsprechenden Eintrag in der DrowDown Liste gehört? Denn schließlich muss ich in der Funktion ja dementsprechend reagieren.

Den value der select-Liste auslesen und einen entsprechenden Text zuordnen. Ob das außerhalb geschieht und dann mittels Parameter übergeben wird, oder ob das inerhalb der Funktion geschieht, ist weitgehend Geschmackssache.

Gruß, Cybaer

[JürgenB]

Hallo Marcus,

Suuuper... Jetzt bin ich verwirrt. Was soll ich den nun machen?

das wollte ich aber nicht. Sorry. Nun, was du machen sollst, hat dir Cybaer ja schon geschrieben. Was du aus dieser Diskussion mitnehmen solltest, ist folgendes: Was in einem oder mehreren Browsern funktioniert, egal ob Standard oder nicht, muss nicht in allen funktionieren.
  Daher sollte man immer prüfen, ob der Browser die benötigten Methoden richtig unterstützt, in möglichst vielen Browsern unter verschiedenen Betriebssystemen testen und ein offenes Ohr für "known problems" haben. Besonders vorsichtig musst du sein, wenn du vom Standard abweichst, wie z.B. bei innerHTML. Ich werde z.B. den Trick von Cybaer auf meinen Seiten testen und so den Mac-IE-Ausschluss möglicherweise wieder entfernen können.
  Trotz allem, lass dich nicht entmutigen, man kann mit Javascript schon wirklich tolle Sachen machen.

Gruß, Jürgen