kevinwiedener: Den Text eines <span>-Elementes ändern?

Hi Leute,

wie kann ich den Text eine <span>-Tags ändern.

Also konkret:

Der Quellcode:

<span name="zuaendern">Dieser Text soll geaendert werden</span>

Und jetzt soll mir eine Javascript-Funktion den Text "Text wurde geaendert" anstelle von "Dieser Text soll geaendert werden" ausgeben! Dies soll bei Buttonklick geschehen.

Das Programm soll Netscape- und MSIE-kompatibel sein, also kann ich dieses Problem nicht mittels all-Tags lösen!

Kann mir jemand helfen?

Danke

Kevin

  1. Hallo,

    wie kann ich den Text eine <span>-Tags ändern.

    Also konkret:

    Der Quellcode:

    <span name="zuaendern">Dieser Text soll geaendert werden</span>

    Und jetzt soll mir eine Javascript-Funktion den Text "Text wurde geaendert" anstelle von "Dieser Text soll geaendert werden" ausgeben! Dies soll bei Buttonklick geschehen.

    <span id="dyntext">Dieser Text soll geaendert werden</span>

    in der Scriptfunktion:

    document.getElementById("dyntext").firstChild.nodeValue="Text wurde geaendert";

    Das Programm soll Netscape- und MSIE-kompatibel sein, also kann ich dieses Problem nicht mittels all-Tags lösen!

    Das funktioniert mit (halbwegs) DOM-Browsern, also nicht im Netscape < 6. Was sind "all-Tags"?

    MfG, Thomas

    1. <span id="dyntext">Dieser Text soll geaendert werden</span>

      in der Scriptfunktion:

      document.getElementById("dyntext").firstChild.nodeValue="Text wurde geaendert";

      Das Programm soll Netscape- und MSIE-kompatibel sein, also kann ich dieses Problem nicht mittels all-Tags lösen!

      Das funktioniert mit (halbwegs) DOM-Browsern, also nicht im Netscape < 6. Was sind "all-Tags"?

      MfG, Thomas

      Sorry, aber bei mir funktioniert das nicht, Thomas :-)

      Kommt die Fehlermeldung, dass das Objekt diese Methode/Eigenschaft nicht unterstützt.

      Gibts keine andere Möglichkeit, oder vielleicht sogar ne Möglichkeit die auch Netscape < 6 - kompatibel ist?

      Kevin

      1. Hallo,

        Sorry, aber bei mir funktioniert das nicht, Thomas :-)

        Kommt die Fehlermeldung, dass das Objekt diese Methode/Eigenschaft nicht unterstützt.

        Naja, korrekt einbinden musst Du das schon ...

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
        <html>
        <head>
        <title>Test by TM 11/02</title>
        <script language="JavaScript" type="text/javascript">
        <!--

        function DynText()
        {
          document.getElementById("dyntext").firstChild.nodeValue="Text wurde geaendert";
        }

        //-->
        </script>
        </head>
        <body>
        <span id="dyntext">Dieser Text soll geaendert werden</span>
        <form action="">
        <input type="button" value="Klick mich!" onclick="DynText()">
        </form>
        </body>
        </html>

        Gibts keine andere Möglichkeit, oder vielleicht sogar ne Möglichkeit die auch Netscape < 6 - kompatibel ist?

        Es gibt noch innerHTML, was aber auch bei NN 4.x ausfaellt oder fuer NN 4.x Konstrukte mit layer-Objekten und document.write() [suche im Archiv].

        MfG, Thomas

      2. Hi

        Kommt die Fehlermeldung, dass das Objekt diese Methode/Eigenschaft nicht unterstützt.

        Dann ist dein Browser nicht (vollständig) DOM-fähig. [*g*]

        Gibts keine andere Möglichkeit, oder vielleicht sogar ne Möglichkeit die auch Netscape < 6 - kompatibel ist?

        <span id="text" onMouseOver="document.getElementById('text').innerHTML = 'Neuer Text'; ">Text</span>

        Netscape 4 und IE 4 können das nicht, Opera 5 afaik auch nicht.

        Fabian

        1. Hallo,

          <span id="text" onMouseOver="document.getElementById('text').innerHTML = 'Neuer Text'; ">Text</span>

          bloss der Mozilla 1.1 packts offenbar nicht richtig, er verträgt wohl
          den Verweis aufs gleiche Objekt nicht, ist ja auch etwas anspruchsvoller
          als backgroundColor zu ändern.
          Man merkt es an der Verzögerung, und onmousout schafft er dann nicht.
          (Mozilla 1.1 Windows)

          Der I.E.6 hingegen kommt sehr damit gut klar, da kann man auch den
          mouseout umsetzen a la "Text" (bzw. alter Text), Respekt!

          Grüsse

          Cyx23

          1. Hi

            <span id="text" onMouseOver="document.getElementById('text').innerHTML = 'Neuer Text'; ">Text</span>
            bloss der Mozilla 1.1 packts offenbar nicht richtig, er verträgt wohl
            den Verweis aufs gleiche Objekt nicht, ist ja auch etwas anspruchsvoller
            als backgroundColor zu ändern.
            Man merkt es an der Verzögerung, und onmousout schafft er dann nicht.
            (Mozilla 1.1 Windows)

            Habe exakt dieselbe Version, funktioniert problemlos... *kopfkratz*

            Der I.E.6 hingegen kommt sehr damit gut klar, da kann man auch den
            mouseout umsetzen a la "Text" (bzw. alter Text), Respekt!

            Naja, das kann er afaik nur, weil er da intern document.all.id.value nimmt >;)

            Fabian

            1. Hallo,

              <span id="text" onMouseOver="document.getElementById('text').innerHTML = 'Neuer Text'; ">Text</span>
              bloss der Mozilla 1.1 packts offenbar nicht richtig, er verträgt wohl
              den Verweis aufs gleiche Objekt nicht, ist ja auch etwas anspruchsvoller
              als backgroundColor zu ändern.
              Man merkt es an der Verzögerung, und onmousout schafft er dann nicht.
              (Mozilla 1.1 Windows)
              Habe exakt dieselbe Version, funktioniert problemlos... *kopfkratz*

              so schaut der Code aus:

              <div id="movers"><span id="motxt"
              onMouseOver="document.getElementById('motxt').innerHTML = 'Neuer Text'; "
              onMouseout="document.getElementById('motxt').innerHTML = 'Alter Text'; ">Alter Text</span>
              </div>

              und beim -Over gibt es 0.5-1 sec. Verzögerung, das -out wird nicht
              umgesetzt, ist doch kein Schreibfehler oder so, zumal IE6 es macht?

              Der I.E.6 hingegen kommt sehr damit gut klar, da kann man auch den
              mouseout umsetzen a la "Text" (bzw. alter Text), Respekt!
              Naja, das kann er afaik nur, weil er da intern document.all.id.value nimmt >;)

              Also er hat doch das gleiche Problem, mouseover oder out
              gewissermaßen rekursiv, bzw. können u.U. nicht beendet werden wenn
              das Object zwischendrinnen nicht vorhanden bleibt?
              In der JavaScriptkonsole ist nichts bemängelt

              Grüsse

              Cyx23

              1. Hi

                (Mozilla 1.1 Windows)
                Habe exakt dieselbe Version, funktioniert problemlos... *kopfkratz*

                so schaut der Code aus:

                <div id="movers"><span id="motxt"
                onMouseOver="document.getElementById('motxt').innerHTML = 'Neuer Text'; "
                onMouseout="document.getElementById('motxt').innerHTML = 'Alter Text'; ">Alter Text</span>
                </div>

                und beim -Over gibt es 0.5-1 sec. Verzögerung, das -out wird nicht
                umgesetzt, ist doch kein Schreibfehler oder so, zumal IE6 es macht?

                aber doch!

                onMouseout="document.getElementById('motxt').innerHTML = 'Alter

                ^^^^
                Da JS CaseSensitive ist, kommt hier ein onMouse_O_ut ganz gut ;-)

                Also er hat doch das gleiche Problem, mouseover oder out
                gewissermaßen rekursiv, bzw. können u.U. nicht beendet werden wenn
                das Object zwischendrinnen nicht vorhanden bleibt?
                In der JavaScriptkonsole ist nichts bemängelt

                Seltsam, bei mir treten keinerlei Fehler auf, er macht alles zügig nacheinander...

                Fabian

                1. Hallo,

                  onMouseout="document.getElementById('motxt').innerHTML = 'Alter
                            ^^^^

                  also O statt o hatte ich auch schon, macht keinen Unterschied.

                  Seltsam, bei mir treten keinerlei Fehler auf, er macht alles zügig nacheinander...

                  Ich hab jetzt nur folgendes als *.html gespeichert:

                  <div id="movers"><span id="motxt"
                  onMouseOver="document.getElementById('motxt').innerHTML = 'Neuer Text';"
                  onMouseOut="document.getElementById('motxt').innerHTML = 'Alter Text';">Alter Text</span>
                  </div>

                  und da ist der gleiche Effekt mit Mozilla 1.1, es liegt also
                  offenbar nicht an der übrigen Seite.

                  Hast du vielleicht eine neuere Version als die 1.1?

                  Grüsse

                  Cyx23

                2. Hi Fabian,

                  Da JS CaseSensitive ist, kommt hier ein onMouse_O_ut ganz gut ;-)

                  hm... beherrscht Mozilla denn kein XHTML?

                  http://www.w3.org/TR/xhtml1/#h-4.2

                  LG Ro*SCNR*land