Jochen Kempf: Wie nutze ich innerHTML bei Events zur dauerhaften Änderung?

Hallo,

ich würde gerne einen Textbereich mit dem onclick Event dauerhaft ändern - bekomme dies aber nicht hin!

Zur Funktionslogik:

  • Mit Javascript habe ich eine Funktion erstellt die bei onclick aufgerufen wird.
  • Die Funktion greift auf einen div-Bereich mittels document.getElementbyId zu um den dortigen HTML Inhalt mit der entsprechenden neuen Variablen vía innerHTML zu ersetzen.
  • Leider funktioniert das nur für den kurzen Moment des Klicks und danach erscheint wieder der ursprüngliche HTML Inhalt des Textbereiches.

--> Wie kann ich den neuen HTML Inhalt der Variablen dauerhaft im div-Bereich anzeigen?

Danke für eure Hilfe,
Jochen.

  1. hi,

    ich würde gerne einen Textbereich mit dem onclick Event dauerhaft ändern - bekomme dies aber nicht hin!

    Zur Funktionslogik:

    Und wie sieht diese in Code umgesetzt aus?

    --> Wie kann ich den neuen HTML Inhalt der Variablen dauerhaft im div-Bereich anzeigen?

    Normalerweise bleibt der .innerHTML zugewiesene Inhalt dauerhafter Natur, sofern du ihn nicht selbst wieder änderst.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Ok - hier der Code...

      Externe Javascript Datei:
      var Navikasten = "<ul><li><a href=''>...usw.</a></li></ul>";
      var BTekg = "&#160;<table id='start' cellspacing='0'>...usw.</table>";

      function BT () {
          if (document.getElementById)
          document.getElementById("divFixiert").style.visibility = "visible";
       document.getElementById("divFixiert").innerHTML = Navikasten;
       document.getElementById("divProdukte").innerHTML = BTekg;
       }

      Externe CSS Datei:
      #divFixiert  {
              position: absolute;
           top: 0.8em; right: 1em;
           width: 14em;
           background-color: #FFCC33;
           border: 2px solid #FFCC33;
           font-size: 0.6em;
           visibility: hidden;
          }

      HTML Datei:
      <a href="" border="0" onclick="BT ()">

      Kannst du hieraus schon einen Fehler entdecken?

      Grüße,
      Jochen.

      hi,

      ich würde gerne einen Textbereich mit dem onclick Event dauerhaft ändern - bekomme dies aber nicht hin!

      Zur Funktionslogik:

      Und wie sieht diese in Code umgesetzt aus?

      --> Wie kann ich den neuen HTML Inhalt der Variablen dauerhaft im div-Bereich anzeigen?

      Normalerweise bleibt der .innerHTML zugewiesene Inhalt dauerhafter Natur, sofern du ihn nicht selbst wieder änderst.

      gruß,
      wahsaga

      1. hi,

        function BT () {
            if (document.getElementById)
            document.getElementById("divFixiert").style.visibility = "visible";
        document.getElementById("divFixiert").innerHTML = Navikasten;
        document.getElementById("divProdukte").innerHTML = BTekg;

        Dass du damit nur die erste der drei dem IF folgenden Zeilen von diesem abhängig machst, und die anderen beiden immer zur Ausführung (und damit ggf. zu einem Fehler) kommen, ist Absicht?

        Kannst du hieraus schon einen Fehler entdecken?

        Zumindest keinen, der das geschilderte Verhalten bewirken sollte.

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Hmm,
          ist zwar keine Absicht aber auch wenn ich den If Befehl weglasse bzw. für jede Anweisung verwende kommt das gleiche Ergebnis raus - Wirksamkeit nur für die Zeit des Klicks.

          Ich hatte vergessen den CSS code für den anderen Bereich anzugeben aber da kommt nichts besonderes drin vor (nur die Formatierung von Text usw.).

          Hast du eine Idee welche Probleme in Frage kommen könnten?

          Bei dem mouseover Event bleibt der Text übrigens stehen, natürlich nur wenn der entsprechende mouseout Event fehlt.

          Gruß,
          Jochen.

          hi,

          function BT () {
              if (document.getElementById)
              document.getElementById("divFixiert").style.visibility = "visible";
          document.getElementById("divFixiert").innerHTML = Navikasten;
          document.getElementById("divProdukte").innerHTML = BTekg;

          Dass du damit nur die erste der drei dem IF folgenden Zeilen von diesem abhängig machst, und die anderen beiden immer zur Ausführung (und damit ggf. zu einem Fehler) kommen, ist Absicht?

          Kannst du hieraus schon einen Fehler entdecken?

          Zumindest keinen, der das geschilderte Verhalten bewirken sollte.

          gruß,
          wahsaga

          1. hi,

            Tipps für Fragende

            Und bitte zitiere mal sinnvoll, TOFU muss nicht sein.

            gruß,
            wahsaga

            --
            /voodoo.css:
            #GeorgeWBush { position:absolute; bottom:-6ft; }
            1. Ok,

              ich werde keine unnötigen Zitate (TOFU) mehr machen!

              Und gemäß den Empfehlungen versuche ich möglichst viel Zusatzinformationen zu meinem Problem zu geben:

              • Mozilla Firefox 1.5.0.3
              • Windows XP Pro
              • Problematische Website auf Festplatte (Intranet)
              • An der Eigenschaft visibility liegt es nicht; Ich habe den Initialtext der betoffenen divs alternativ dynamisch mit dem onload Event im body tag geladen aber das Problem ist das gleiche; Verwende ich anstatt des onclick Events den mouseover Event verändert sich der Initialtext wie von mir gewünscht dauerhaft; Es muss also an dem onclick Event liegen!

              --> Problem: Wie kann ich bei Klick auf einen Link den Initialtext eines div Bereichs im selben Dokument dauerhaft verändern?

              1. hi,

                Und gemäß den Empfehlungen versuche ich möglichst viel Zusatzinformationen zu meinem Problem zu geben:

                Wie wär's mal mit einer vollständigen Testseite?
                (Bitte online, keine Lust auf C&P.)

                gruß,
                wahsaga

                --
                /voodoo.css:
                #GeorgeWBush { position:absolute; bottom:-6ft; }
                1. Hi Wahsaga,
                  hat zwar etwas gedauert, aber deiner Bitte

                  Wie wär's mal mit einer vollständigen Testseite?
                  (Bitte online, keine Lust auf C&P.)

                  bin ich nachgegangen:

                  Link: http://www.esense.cl/test/Telemedicina.html

                  Bei Klick auf die erste Grafik im Linken Bereich (BT 3) sollte sich der Text im restlichen Fensterbereich dauerhaft ändern, tut er aber nicht.

                  Grüße,
                  Jochen.

                  1. Hallo,

                    Link: http://www.esense.cl/test/Telemedicina.html

                    Auszug:
                    <a href="" border="0" onclick="BT ()"><table class="liste">
                        <tr><td>Electrocardiógrafo inalámbrico:<br> <b>BT 3/ BT 12</b></td></tr>

                    <tr class="white"><td><center><img src='pics/BT12.gif'></center></td></tr>
                      </table></a>

                    Sehr bedenkliches HTML ist das. Schon gar, weil es eigentlich wohlgeformtes XHTML sein soll. Ein TABLE-Element in einem A-Element ist nicht erlaubt.

                    Bei Klick auf die erste Grafik im Linken Bereich (BT 3) sollte sich der Text im restlichen Fensterbereich dauerhaft ändern, tut er aber nicht.

                    Nachdem das JavaScript, welches beim click-Event aufgerufen wird, fertig abgearbeitet ist, wird der click-Event an das A-Element durchgereicht, welches daraufhin den URI in href="" aufruft. Wenn Du mal mit dem Mauszeiger über diesen Link gehst und in die Statuszeile Deines Browsers schaust, dann siehst Du, welche das ist.

                    Der click-Event wird nicht durchgereicht, wenn die oncklick-Funktion false zurückliefert, also onclick="BT(); return false;". Dann ist aber das A-Element unnötig. Die onclick-Funktion kann auch das TABLE-Element ausführen.

                    viele Grüße

                    Axel

                    1. Hi Alex,

                      damit funktionierts:

                      »»
                       Die onclick-Funktion kann auch das TABLE-Element ausführen.

                      Danke!

                      Jochen